/* Cordelia Fotografie – gemeinsame Styles
   Die Gestaltung der einzelnen Seiten steht (wie im Design-Editor) direkt im HTML.
   Hier: Schriften (lokal, ohne Google), Grundwerte, Handy-Menü, Formulare und Anpassungen für Handy & Tablet. */

/* ---------- Schriften (lokal) ---------- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/montserrat-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/montserrat-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/montserrat-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Strainger Signatures'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/strainger-signatures.woff2') format('woff2'); }

/* ---------- Grundwerte ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; }
a { color: #1E1E1E; }
a:hover { color: #77756A; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.dc-if { display: contents; }
:focus-visible { outline: 2px solid #8E7A63; outline-offset: 3px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: #1E1E1E; color: #FFFFFF; font: 500 12px/1.4 'Montserrat', sans-serif; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.skip-link:focus { top: 12px; color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Spamschutz-Feld (für Menschen unsichtbar) */
.cf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Menü ---------- */
.nav-toggle { display: none; }
.mainnav a { transition: opacity .2s ease; }

@media (max-width: 900px) {
  .mainnav { flex-wrap: wrap !important; padding: 18px 20px !important; gap: 0 !important; row-gap: 0 !important; }
  .mainnav .mainnav-logo { order: 1; font-size: 24px !important; }
  .mainnav .nav-toggle { order: 2; display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 44px; padding: 0 0 0 12px; background: transparent; border: 0; color: inherit; font: 500 10.5px/1 'Montserrat', sans-serif; letter-spacing: .32em; text-transform: uppercase; cursor: pointer; }
  .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { display: block; width: 22px; height: 1px; background: currentColor; position: relative; transition: transform .25s ease, background .25s ease; }
  .nav-toggle-bar::before, .nav-toggle-bar::after { content: ''; position: absolute; left: 0; }
  .nav-toggle-bar::before { top: -7px; }
  .nav-toggle-bar::after { top: 7px; }
  .mainnav.is-open .nav-toggle-bar { background: transparent; }
  .mainnav.is-open .nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
  .mainnav.is-open .nav-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }
  .mainnav .mainnav-group { display: none !important; order: 3; flex: 1 1 100% !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; }
  .mainnav.is-open .mainnav-group { display: flex !important; }
  .mainnav.is-open .mainnav-group:first-of-type { margin-top: 18px; border-top: 1px solid currentColor; border-top-color: rgba(127,127,127,.35); padding-top: 6px; }
  .mainnav .mainnav-group a { padding: 13px 0 !important; font-size: 11px !important; }
  .mainnav .mainnav-group a[href*="#kontakt"], .mainnav .mainnav-group a[style*="border: 1px solid"] { margin: 12px 0 8px; padding: 0 20px !important; min-height: 44px; }
}

/* ---------- Formulare ---------- */
input, textarea, select { border-radius: 0; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-bottom-color: #1E1E1E !important; box-shadow: 0 1px 0 #1E1E1E; }
.cf-form-error { margin: 0; grid-column: 1 / -1; padding: 12px 16px; background: #F6E9E1; color: #6B3A1E; font-size: 14px; line-height: 1.6; }
button[type="submit"][disabled] { opacity: .6; cursor: progress !important; }

/* ---------- Tablet & Handy ---------- */
@media (max-width: 1100px) {
  /* feste Breiten/Höhen aus dem Editor lösen */
  [style*="width: 1452px"], [style*="width: 1434px"] { width: auto !important; }
}

@media (max-width: 760px) {
  /* Seitenränder */
  [style*="padding: 0 44px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding: 0px 44px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding: 70px 44px 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 900px) {
  .cf-split { min-height: 0 !important; }
}
@media (max-width: 760px) {
  /* Startseite: „Auf einen Blick“ untereinander mit Linie oben statt links */
  section[aria-label="Auf einen Blick"] [style*="border-left"] { border-left: 0 !important; border-top: 1px solid #DDD7CC; }
  section[aria-label="Auf einen Blick"] [style*="padding: 34px 20px"] { padding: 22px 20px !important; }
  /* randlose Bilder an den kleineren Seitenrand anpassen */
  [style*="margin-left: -44px"] { margin-left: -20px !important; width: calc(100% + 40px) !important; }
  [style*="right: -23px"] { right: -8px !important; }
  /* Bild-in-Bild-Abschnitte („Liebe Worte“ u. a.) ohne seitliche Verschiebung */
  [style*="transform: translateX(clamp"] { transform: none !important; }
  [style*="height: 459px"] { width: 100% !important; height: auto !important; }
  [style*="padding-left: 9%"], [style*="padding-right: 10%"] { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 760px) {
  /* breite Raster einspaltig */
  [style*="minmax(380px"], [style*="minmax(280px"] { grid-template-columns: 1fr !important; }
  form[style*="grid-template-columns: 1fr 1fr"], .hf { grid-template-columns: 1fr !important; }
  .hf > div { grid-column: 1 / -1 !important; }
  /* große Innenabstände verkleinern */
  [style*="px 44px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding: 60px 60px"] { padding: 40px 20px !important; }
  [style*="padding: 90px 60px"] { padding: 60px 24px !important; }
  [style*="padding: 110px 72px"] { padding: 70px 20px !important; }
  [style*="padding: 56px 52px"] { padding: 40px 24px !important; }
}
@media (max-width: 760px) {
  /* Überschriften, die im Entwurf nicht umbrechen dürfen, auf dem Handy umbrechen lassen */
  h1[style*="white-space: nowrap"], h2[style*="white-space: nowrap"], h3[style*="white-space: nowrap"] { white-space: normal !important; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  /* Tablet: untereinander stehende Collagen und Bild-in-Bild-Fotos nicht riesig werden lassen */
  [style*="flex: 1 1 380px; min-width: 0; position: relative; padding-bottom: 100px"] { flex-basis: 100% !important; max-width: 520px; margin-left: auto; margin-right: auto; }
  [style*="transform: translateX(clamp"] { transform: none !important; max-width: 440px; margin-left: auto; margin-right: auto; }
}

/* Auswahl-Knöpfe (z. B. „Welches Shooting?“) */
.cf-chip { position: relative; display: inline-flex; cursor: pointer; }
.cf-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cf-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid #DDD7CC; background: #FFFFFF; color: #1E1E1E; font-size: 14px; transition: background .2s ease, border-color .2s ease; }
.cf-chip:hover span { border-color: #1E1E1E; }
.cf-chip input:checked + span { background: #1E1E1E; border-color: #1E1E1E; color: #FFFFFF; }
.cf-chip input:focus-visible + span { outline: 2px solid #8E7A63; outline-offset: 2px; }
@media (max-width: 760px) { .cf-pflicht { padding: 18px 16px 20px !important; } }

/* Aufklapp-Fragen (FAQ) – wie auf den Unterseiten */
.kfaq summary { list-style: none; }
.kfaq summary::-webkit-details-marker { display: none; }
.kfaq[open] .kplus { transform: rotate(45deg); }
.kfaq[open] { border-color: #1E1E1E; }

/* Instagram-Kacheln: auf Handy & kleinem Tablet 2 bzw. 4 Spalten mit 4 Bildern (sonst bleibt ein Bild allein) */
@media (max-width: 799px) {
  section[aria-label="Instagram"] > div[style*="grid-template-columns"] { grid-template-columns: repeat(4, 1fr) !important; }
  section[aria-label="Instagram"] > div[style*="grid-template-columns"] > a:nth-child(n+5) { display: none; }
}
@media (max-width: 599px) {
  section[aria-label="Instagram"] > div[style*="grid-template-columns"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Hochzeiten: Bildleiste auf Handy/Tablet in 2 Reihen à 4 Bildern; Preis-Spalten der „Investition“ nur auf größeren Bildschirmen */
@media (max-width: 900px) { .cf-leiste { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 760px) {
  .cf-nur-gross { display: none !important; }
  section[aria-labelledby="h2-preis"] h2 { margin-bottom: 8px !important; }
}

/* Fußzeile: Menü fürs Handy */
.footnav { display: none; }
@media (max-width: 900px) {
  .footnav { display: block; margin: -8px 0 22px; }
  .footnav .footnav-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; margin: 0 auto; background: transparent; border: 1px solid #1E1E1E; color: #1E1E1E; font: 500 10.5px/1 'Montserrat', sans-serif; letter-spacing: .32em; text-transform: uppercase; cursor: pointer; }
  .footnav.is-open .nav-toggle-bar { background: transparent; }
  .footnav.is-open .nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
  .footnav.is-open .nav-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }
  .footnav-list { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 14px 0 6px; }
  .footnav-list[hidden] { display: none !important; }
  .footnav-list a { padding: 12px 0; font-weight: 500; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; text-decoration: none; color: #1E1E1E; }
}
/* Bildleisten mit 6 Bildern (Über mich, Schule): auf dem Handy 2 Reihen à 3 */
@media (max-width: 760px) { .cf-leiste6 { grid-template-columns: repeat(3, 1fr) !important; } }