/* em-foto-design.de — V0-Baseline. Theme-Tokens hier zentral, damit Header/
 * Footer/SitePage konsistent darauf zugreifen. Polish kommt in einem
 * spaeteren Commit zusammen mit Hero-Layout + Portfolio-Galerie. */

/* Selbst-gehostete Montserrat — Variable-Font, ein woff2 pro Unicode-Subset.
 * Datenfluss: aus Google Fonts geladen (lat + lat-ext) und unter
 * wwwroot/fonts/ abgelegt; KEIN Request an fonts.googleapis.com /
 * fonts.gstatic.com mehr, damit keine IP des Besuchers an Google geht.
 * Variable-Range 400–700 deckt die vier in der Site genutzten Gewichte ab. */
@font-face {
    font-family: 'Montserrat';
    font-style:  normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style:  normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Palette aus der bestehenden em-foto-design.de uebernommen:
       Blaugrau als ruhige Primaerfarbe, warmes Rot als Akzent (kommt
       schon im Logo vor), gedaempfte Greys fuer Body/Border. */
    --color-text:           #353535;
    --color-muted:          #666666;
    --color-accent:         #6592a7;   /* Blaugrau — H2/H3, Sekundaer-Links */
    --color-accent-strong:  #4f778a;   /* dunkleres Blaugrau — H1, Hero-Headline */
    --color-accent-soft:    #e8eef2;   /* helle Variante fuer Hero-Backgrounds */
    --color-warm:           #ce0000;   /* Akzent-Rot — Active-Nav, Primary-CTA, "wirklich"-Italic */
    --color-warm-soft:      #fbe9e9;   /* helle Variante fuer subtile Akzente */
    --color-coral:          #ff5e46;   /* Logo-Aquarell-Coral, pixel-genau aus dem em-Kreis gesampelt */
    --color-coral-soft:     #ffdfda;   /* 20-%-Mix mit Weiss — heller Footer-BG, gerade noch WCAG-AA mit Body-/Muted-Text */
    /* Foundation-BackToTop liest --accent / --accent-dark — Coral im
       Ruhezustand, Warm-Rot auf Hover (gleiches Akzent-Paar wie Buttons/Nav). */
    --accent:               var(--color-coral);
    --accent-dark:          var(--color-warm);
    --color-border:         #e5e7eb;
    --color-bg:             #ffffff;
    --color-bg-alt:         #f7f8fb;

    /* Eine Schrift-Familie fuer Body + Headlines (Montserrat); Hierarchie
       ueber Groesse und Gewicht. System-Stack als Fallback waehrend der
       Webfont noch laedt. */
    --font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-display: var(--font-body);

    --container-max:        64rem;
    --container-pad:        1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* FocusOnNavigate setzt nach Route-Wechsel programmatisch Focus auf <h1> —
 * das ist gut fuer Screen-Reader (springt direkt zur Seitenueberschrift),
 * der Browser-Default-Outline aber stoerend. Headings sind nicht interaktiv,
 * also Outline pauschal ausschalten; an interaktiven Elementen bleibt der
 * Default-Indikator erhalten. */
h1, h2, h3, h4, h5, h6,
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus {
    outline: none;
}
:focus:not(:focus-visible) { outline: none; }

/* Print-Anpassungen — gilt fuer Browser-Druck UND fuer Headless-PDF-Export.
 * Cookie-Banner und der Blazor-Error-Banner werden ausgeblendet, damit der
 * Druck/das PDF die Site so zeigt wie der Besucher sie auf der Seite sieht.
 * Akkordeon-Items werden zwangs-aufgeklappt, damit der Drucker die ganzen
 * Preise sehen kann statt nur Titel + Preis-Zeilen. */
@media print {
    #cookie-consent,
    .cookie-consent,
    #blazor-error-ui,
    /* Im Druck sind weder Cross-Navigation noch CTA-Buttons relevant —
       der Leser hat das Papier in der Hand, nicht den Browser. */
    .portfolio-crossnav,
    .pricing-crossnav,
    .page-cta,
    .portfolio-categories,
    .portfolio-section__more,
    .portfolio-lightbox,
    /* Site-Header-Nav unnoetig im Druck; das Logo bleibt sichtbar. */
    .site-header__nav,
    .site-header__hamburger {
        display: none !important;
    }
    .pricing-offer,
    .pricing-offer .pricing-offer__detail {
        /* Akkordeons im Druck immer offen darstellen, damit der Leser
           alle Pakete und Leistungen sieht. */
        display: block !important;
    }
    .pricing-offer .pricing-offer__summary::after {
        display: none;
    }
    /* Detail-Galerien im Print mit weniger aggressivem Shadow/Hover. */
    .portfolio-grid__item {
        box-shadow: none !important;
        transform: none !important;
    }
}

p { margin: 0 0 0.85rem 0; }
p.lead { font-size: 1.1rem; }

h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.2;
    margin: 0 0 0.6rem 0;
    letter-spacing: -0.005em;
}
/* H2/H3 brauchen Luft nach oben, damit sie als neue Abschnitt-
   Markierung wirken, statt am vorherigen Absatz zu kleben. Erste
   Ueberschrift im Container behaelt margin-top 0, damit es keinen
   doppelten Abstand nach dem SitePage-H1 oder einem Section-Header
   gibt. */
h2 { margin-top: 2.25rem; }
h3 { margin-top: 1.5rem; }
h2:first-child, h3:first-child { margin-top: 0; }
h1 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-accent-strong);
}
h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-accent);
}
h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-accent);
}

a {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-inline: var(--container-pad);
}

/* --- Page-Frame ------------------------------------------------------ */

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page__body { flex: 1 0 auto; padding-block: 2.5rem; }

/* --- Skip-Link ------------------------------------------------------- */

.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    position: fixed;
    left: 0.5rem;
    top: 0.5rem;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    background: var(--color-accent);
    color: #fff;
    z-index: 1001;
}

/* --- Site-Header ----------------------------------------------------- */

.site-header {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.1rem;
}
.site-header__brand {
    display: inline-block;
    text-decoration: none;
    line-height: 0;          /* verhindert Baseline-Luft unterm <img> */
}
.site-header__brand:hover { text-decoration: none; }
.site-header__logo {
    display: block;
    height: 104px;           /* Logo praesent — Brand traegt die Site */
    width: auto;
    max-width: 100%;
}
@media (max-width: 640px) {
    .site-header__logo { height: 64px; }
}

.site-header__toggle { display: none; }
.site-header__hamburger { display: none; cursor: pointer; }

.site-header__nav {
    display: flex;
    gap: 1.5rem;
}
.site-header__link {
    color: var(--color-text);
    text-decoration: none;
    padding-block: 0.25rem;
    border-bottom: 2px solid transparent;
    font-weight: 500;
}
.site-header__link:hover {
    color: var(--color-warm);
    border-bottom-color: var(--color-border);
}
.site-header__link.active {
    color: var(--color-warm);
    border-bottom-color: var(--color-warm);
    font-weight: 600;
}

/* --- Sub-Nav (Portfolio + Preise) -----------------------------------
 * Desktop: Hover-Dropdown, absolute positioniert, ueberlagert den Content.
 * Mobile (<640): inline zweite Ebene unter dem Hauptlink — kein Hover
 * verfuegbar, also stack-and-show statt overlay. */
.site-header__group {
    position: relative;
}
.site-header__link--group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.site-header__caret {
    font-size: 0.7em;
    color: var(--color-muted);
    line-height: 1;
}
.site-header__submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-header__sublink {
    display: block;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
}
.site-header__sublink:hover,
.site-header__sublink:focus-visible {
    color: var(--color-warm);
}
.site-header__sublink.is-active {
    color: var(--color-warm);
    font-weight: 600;
}

/* Desktop-Verhalten — Dropdown nur bei hover/focus-within. */
@media (min-width: 641px) {
    .site-header__submenu {
        position: absolute;
        top: 100%;
        left: -0.6rem;
        min-width: 220px;
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: 4px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
        padding: 0.4rem 0;
        margin-top: 0.4rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
        z-index: 100;
    }
    .site-header__group:hover .site-header__submenu,
    .site-header__group:focus-within .site-header__submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .site-header__sublink {
        padding: 0.5rem 1rem;
    }
    .site-header__sublink:hover,
    .site-header__sublink:focus-visible {
        background: var(--color-bg-alt);
    }
}

@media (max-width: 640px) {
    .site-header__hamburger {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        width: 1.75rem;
        height: 1.25rem;
    }
    .site-header__hamburger span {
        display: block;
        height: 2px;
        background: var(--color-accent);
        border-radius: 1px;
    }
    .site-header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease;
    }
    .site-header__toggle:checked ~ .site-header__nav {
        max-height: 30rem;
    }
    .site-header__nav .site-header__link {
        padding: 0.75rem var(--container-pad);
        border-bottom: 1px solid var(--color-border);
    }
    .site-header__inner { position: relative; }

    /* Sub-Nav auf Mobile: kein Hover moeglich — Sub-Items werden
       eingerueckt direkt unter dem Hauptlink gezeigt (keine Tap-zum-
       Aufklappen-Mechanik, das waere ein extra Schritt). */
    .site-header__caret { display: none; }
    .site-header__submenu {
        background: var(--color-bg-alt);
        border-bottom: 1px solid var(--color-border);
    }
    .site-header__sublink {
        padding: 0.55rem var(--container-pad) 0.55rem calc(var(--container-pad) + 1rem);
        font-size: 0.95rem;
    }
}

/* --- Site-Footer ----------------------------------------------------- */

.site-footer {
    /* Hintergrund + Akzentleiste in Logo-Coral-Familie: BG ist eine helle
       Tint des im em-Kreis sampled Coral (#ff5e46 -> mit 80 % Weiss
       gemischt = #ffdfda). Body-Text und muted-grey behalten knapp WCAG-AA
       Kontrast; die Border-Top zeigt die voll-saturierte Logo-Farbe. */
    background: var(--color-coral-soft);
    border-top: 3px solid var(--color-coral);
    margin-top: 3rem;
    color: var(--color-text);
}
.site-footer__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem;
    padding-block: 2.5rem;
}
.site-footer__column p { margin: 0 0 0.5rem 0; }
.site-footer__brand {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-accent);
}
.site-footer__brand-tagline { color: var(--color-muted); }
.site-footer__heading {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    margin-bottom: 0.6rem;
}
.site-footer__label { color: var(--color-muted); margin-right: 0.3rem; }
.site-footer__legal {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.site-footer__bottom {
    border-top: 1px solid var(--color-border);
    padding-block: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}
.site-footer__bottom p { margin: 0; }
.site-footer__credit a { color: var(--color-muted); }

/* --- SitePage-Layout ------------------------------------------------- */

.site-page {}
.site-page--narrow { max-width: 42rem; }
.site-page--wide   { max-width: var(--container-max); }
.site-page--with-aside {
    max-width: var(--container-max);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: 2.5rem;
}
@media (max-width: 800px) {
    .site-page--with-aside { grid-template-columns: 1fr; }
}
.site-page__head { margin-bottom: 1.5rem; }
.site-page__article { min-width: 0; }
.site-page__aside { color: var(--color-muted); font-size: 0.95rem; }

/* --- CookieConsent (Foundation) -------------------------------------- */

.cookie-consent {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--color-accent);
    color: #fff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}
.cookie-consent[hidden] { display: none; }
.cookie-consent__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding-block: 1.1rem;
}
.cookie-consent__heading {
    font-size: 1rem;
    margin: 0 0 0.3rem 0;
    color: #fff;
}
.cookie-consent__body { margin: 0; font-size: 0.9rem; line-height: 1.45; }
.cookie-consent__body a { color: #fff; text-decoration: underline; }
.cookie-consent__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cookie-consent__btn {
    font: inherit;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: 1px solid #fff;
    cursor: pointer;
    background: transparent;
    color: #fff;
}
.cookie-consent__btn--accept { background: #fff; color: var(--color-accent); font-weight: 600; }
.cookie-consent__btn:hover { filter: brightness(1.1); }
@media (max-width: 640px) {
    .cookie-consent__inner { grid-template-columns: 1fr; }
}

/* --- Blazor-Error-Banner --------------------------------------------- */

#blazor-error-ui {
    display: none;
    background: #fff3cd;
    border-top: 1px solid #ffc107;
    color: #1f2937;
    padding: 0.75rem 1rem;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1100;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* --- Home: Hero / Promises / CTA / Services ------------------------- */

.home-hero {
    /* Kein Hintergrund — die Bilder sind die Buehne, der Hero ist
       Sprechblock, kein farbiger Container. */
    padding-block: 2rem 1.5rem;
}
.home-hero__inner {}    /* keine Eigen-Begrenzung — folgt der Default-Container-Breite (var(--container-max)), damit der Hero die gleiche Breite hat wie die Galerie darunter */
.home-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-muted);
    margin: 0 0 0.85rem 0;
}
.home-hero__eyebrow-mark {
    display: inline-block;
    width: 1.8rem;
    height: 1px;
    background: var(--color-warm);    /* dezenter Akzent statt UPPERCASE-Block allein */
}
.home-hero__headline {
    font-size: clamp(1.8rem, 2.4vw + 1rem, 2.6rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-accent-strong);
    margin: 0 0 1.1rem 0;
}
.home-hero__headline em {
    font-style: italic;
    color: var(--color-warm);          /* Akzentwort hebt sich rot ab */
    font-weight: 600;
}
.home-hero__subline { font-size: 1.15rem; margin: 0 0 1.75rem 0; }
.home-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.home-hero__cta {
    /* Inline am Ende der Subline — kein Block, keine eigene Zeile. Padding
       knapper als Stand-alone, damit der Button im Textfluss bleibt ohne
       die Zeilenhoehe zu sprengen. */
    display: inline-block;
    margin-left: 0.6rem;
    padding: 0.45rem 1.1rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    text-decoration: none;
    background: var(--color-warm);
    color: #fff;
    border: 1px solid var(--color-warm);
    vertical-align: baseline;
    transition: filter 0.15s ease;
    white-space: nowrap;
}
.home-hero__cta:hover {
    filter: brightness(1.07);
    text-decoration: none;
}

.home-promises { margin-top: 2.5rem; }
.home-promises__grid {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
}
.home-promises__item {
    padding: 1.25rem 1.4rem;
    background: var(--color-bg-alt);
    border-top: 2px solid var(--color-warm);   /* schmaler roter Akzent oben */
    border-radius: 2px;
}
.home-promises__item p { margin: 0; }
.home-promises__closing { margin-top: 0.5rem; }

.home-cta {
    margin-top: 2.5rem;
    padding: 1.5rem;
    background: var(--color-bg-alt);
    border-radius: 4px;
}
.home-cta__intro { margin-bottom: 0.6rem; }
.home-cta__signature { margin-top: 0.8rem; color: var(--color-muted); }

.home-services { margin-top: 2.5rem; }
.home-services__grid {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
}
.home-services__card {
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg);
}
.home-services__card h3 { margin: 0 0 0.4rem 0; font-size: 1.05rem; }
.home-services__card h3 a { text-decoration: none; }
.home-services__card h3 a:hover { text-decoration: underline; }
.home-services__card p { margin: 0; color: var(--color-text); font-size: 0.95rem; }

/* --- Portfolio-Galerie + Highlights --------------------------------- */

/* Die eigentliche Slider-Optik kommt aus Carecom.Foundation/Components/
 * PhotoSlider.razor.css (scoped). Foundation-Defaults sind auf dunkle
 * Buehne ausgelegt (carecom.de-Aesthetik); wir ueberschreiben die paar
 * Theme-CSS-Variablen, damit der Slider zum hellen EM-FOTO-Look passt:
 * leichte Letterbox statt Schwarz, knappere Border-Radien, Coral-Focus.
 */
:root {
    --photo-slider-bg:             var(--color-bg-alt);
    --photo-slider-radius:         4px;
    --photo-slider-caption-radius: 3px;
    --photo-slider-focus:          var(--color-warm);
}

/* Hier nur die Rahmen-Klassen aus PortfolioGallery: leere-Liste-Hinweis
 * und der Zurueck-Link unter den Kategorien. */

.portfolio-gallery__empty { font-size: 0.95rem; color: var(--color-muted); margin: 1.5rem 0; }

.portfolio-back {
    margin-top: 2rem;
    font-size: 0.95rem;
    color: var(--color-muted);
}

.home-highlights        { margin-block: 1rem 3rem; }
.home-highlights__more  { margin-top: 1rem; text-align: right; font-size: 0.95rem; }

/* --- Portfolio-Uebersicht ------------------------------------------- */

/* Kategorie-Chips ganz oben — primaerer Einstieg in die Detail-Galerien.
 * Coral-Akzentleiste links als Marken-Bezug, dezent abgesetzter Background
 * damit die Chips als zusammenhaengende Navigation wirken. */
.portfolio-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.5rem 0 2.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-bg-alt);
    border-left: 4px solid var(--color-coral);
    border-radius: 4px;
}
.portfolio-categories__chip {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-accent-strong);
    text-decoration: none;
    font-weight: 500;
    line-height: 1.2;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.portfolio-categories__chip:hover,
.portfolio-categories__chip:focus-visible {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    color: #fff;
    transform: translateY(-1px);
}

/* Vertikaler Stapel von Kategorie-Sektionen — pro Sektion: Header
 * (Titel + Teaser), Slider, Mehr-Button. Klare Trennung durch eine
 * Hairline und reichlich vertikalem Whitespace; keine Slider mehr
 * nebeneinander, damit jeder Slider die volle Container-Breite hat
 * und der Besucher sich auf eine Kategorie konzentrieren kann. */
.portfolio-section {
    padding-block: 2.5rem;
    border-top: 1px solid var(--color-border);
}
.portfolio-section:first-of-type {
    border-top: none;
    padding-top: 0.5rem;
}
.portfolio-section__head {
    margin-bottom: 1.5rem;
}
.portfolio-section__title {
    margin: 0 0 0.4rem 0;
    font-size: 1.6rem;
}
/* h2 als Link zur Detail-Seite — Underline-Indicator zeigt im Hover/Focus
   dass es klickbar ist, ohne den Lesefluss zu stoeren. */
.portfolio-section__title-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.portfolio-section__title-link:hover,
.portfolio-section__title-link:focus-visible {
    color: var(--color-warm);
    border-bottom-color: var(--color-warm);
}
.portfolio-section__teaser {
    margin: 0;
    max-width: 50rem;
    color: var(--color-text);
}
.portfolio-section__more {
    margin: 1.25rem 0 0;
    text-align: right;
}
/* Prominenter CTA-Button statt mini-Text-Link — sorgt dafuer, dass die
   Detail-Seite zuverlaessig gefunden wird. Coral als CTA-Farbe, weil das
   die Marken-Akzentfarbe ist (Logo-Aquarell-Coral). */
.portfolio-section__cta {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    background: var(--color-coral);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    line-height: 1.2;
    transition: background 0.15s ease, transform 0.15s ease;
}
.portfolio-section__cta:hover,
.portfolio-section__cta:focus-visible {
    background: var(--color-warm);
    color: #fff;
    transform: translateY(-1px);
}

/* Cross-Navigation am Fuß jeder Portfolio-Detail-Seite — drei Karten
 * mit den anderen Kategorien plus dezenter Uebersichts-Link. Vermeidet
 * Sackgasse: Besucher bleibt im Portfolio-Bereich, anstatt nur ueber
 * den Browser-Back-Button weiterzukommen. */
.portfolio-crossnav {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}
.portfolio-crossnav__heading {
    margin: 0 0 1rem;
    font-size: 1.2rem;
    color: var(--color-accent-strong);
}
.portfolio-crossnav__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 800px) {
    .portfolio-crossnav__cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
    .portfolio-crossnav__cards { grid-template-columns: 1fr; }
}
.portfolio-crossnav__card {
    display: block;
    padding: 1rem 1.2rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-accent-strong);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.portfolio-crossnav__card:hover,
.portfolio-crossnav__card:focus-visible {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    color: #fff;
    transform: translateY(-2px);
}
.portfolio-crossnav__card-label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 0.15s ease;
}
.portfolio-crossnav__card-title {
    display: block;
    font-weight: 500;
    font-size: 1.05rem;
}
.portfolio-crossnav__card:hover .portfolio-crossnav__card-label,
.portfolio-crossnav__card:focus-visible .portfolio-crossnav__card-label {
    color: rgba(255, 255, 255, 0.75);
}
.portfolio-crossnav__overview {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: 0.95rem;
}

/* --- Pricing -------------------------------------------------------- */

.pricing-section {
    /* Volle Viewport-Breite des Container — Sektion sticht heraus, weil
       sie ueber den Reading-Column-Padding hinausgeht. Plus alternierendes
       Background: Mitte-Sektion hell-grau, aussen weiss — sehr klare
       Zielgruppen-Trennung. */
    margin-block: 2.5rem;
    padding: 2rem 1.5rem;
    border-top: 4px solid var(--color-coral);   /* Akzent-Leiste oben (Brand-Bezug) */
    border-radius: 4px;
}
.pricing-section--artist {
    background: var(--color-bg-alt);
}

.pricing-section__head {
    margin-bottom: 1.5rem;
}
.pricing-section__title {
    margin: 0 0 0.4rem 0;
    font-size: 1.6rem;
}
.pricing-section__intro {
    margin: 0 0 1rem 0;
    max-width: 50rem;
}

/* MwSt-Badge: prominent als Pill rechts oben oder direkt unter dem Intro.
 * Farb-Codierung: --excl (zzgl) in Coral-warm, --incl (inkl) in einem
 * gruenen Ton — semantisch "inklusiv" = positives Signal. */
.pricing-section__vat {
    display: inline-block;
    margin: 0;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    border-radius: 999px;
    border: 1px solid currentColor;
}
.pricing-section__vat--excl {
    color: #8a3a00;
    background: #fff1e7;
    border-color: #f0c8a8;
}
.pricing-section__vat--incl {
    color: #1f5a36;
    background: #e7f4ec;
    border-color: #b8d9c4;
}
.pricing-section__vat strong { font-weight: 700; }

/* Eingedampfte Orientierungs-Fassung: schlanker Textblock statt der
   frueheren Paket-Akkordeons. Anker-Liste ("ab"-Werte) + gemeinsamer
   "immer dabei"-Block + Individual-Hinweis. max-width haelt den Text in
   angenehmer Lesebreite, auch wenn die Sektion breiter waere. */
.pricing-brief { max-width: 46rem; }
.pricing-brief__label {
    margin: 1.5rem 0 0.4rem;
    font-weight: 700;
}
.pricing-brief ul {
    margin: 0;
    padding-left: 1.3rem;
    line-height: 1.8;
}
.pricing-brief__vat {
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    color: var(--color-muted);
}
.pricing-brief__included {
    margin: 0;
    line-height: 1.7;
}
.pricing-brief__individual {
    margin: 1.5rem 0 0;
}

/* Akkordeon-Liste der Angebote — native <details>/<summary>, kein JS. */
.pricing-offers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pricing-offer {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}
.pricing-section--artist .pricing-offer {
    background: var(--color-bg);       /* gleicher Card-Background auch bei grauer Sektion */
}
.pricing-offer__summary {
    /* Default-Disclosure-Triangle wegblenden, eigenes [+]/[-] rechts */
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    font-weight: 500;
}
.pricing-offer__summary::-webkit-details-marker { display: none; }
.pricing-offer__summary::after {
    content: "+";
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-accent);
    width: 1.5rem;
    text-align: center;
    transition: transform 0.15s ease;
}
.pricing-offer[open] > .pricing-offer__summary::after {
    content: "−";
}
.pricing-offer__summary:hover {
    background: var(--color-bg-alt);
}
.pricing-offer__title {
    font-size: 1.05rem;
}
.pricing-offer__price {
    font-weight: 700;
    color: var(--color-accent);
    font-size: 1.05rem;
    text-align: right;
    /* kein nowrap — der MwSt-Hinweis darf bei sehr langen Preisen
       (z.B. "150 € / Person (bis zu fünf), …") in die naechste Zeile
       umbrechen, aber als ganzes (siehe .pricing-offer__vat). */
}
.pricing-offer__vat {
    display: inline-block;
    margin-left: 0.35rem;
    font-weight: 400;
    color: var(--color-muted);
    font-size: 0.82em;
    white-space: nowrap;
}
.pricing-offer__detail {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1.1rem;
}
.pricing-offer__detail ul {
    margin: 0 0 0.5rem 0;
    padding-left: 1.2rem;
}
.pricing-offer__options-label {
    margin-top: 1rem;
    margin-bottom: 0.3rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
}
.pricing-closing { margin-top: 1.5rem; font-style: italic; color: var(--color-muted); }

/* Lead-Text auf jeder Pricing-Detail-Seite (Business/Künstler/Privat).
   .lead waere zu lang — wir nutzen ein ruhigeres Spacing. */
.pricing-section__lead {
    margin: 0 0 1.5rem 0;
    max-width: 50rem;
    font-size: 1.05rem;
    color: var(--color-text);
}

/* --- Pricing-Übersicht (/preise) ----------------------------------- */

/* Drei Karten zu den Zielgruppen — analog zur Portfolio-Übersicht.
   Coral-Top-Border als Marken-Akzent, Hover wechselt auf Warm-Rot. */
.pricing-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 2rem 0 2.5rem;
}
@media (max-width: 900px) {
    .pricing-overview { grid-template-columns: 1fr; }
}
.pricing-overview__card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-coral);
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-top-color 0.15s ease;
}
.pricing-overview__card--artist {
    background: var(--color-bg-alt);   /* alternierender Hintergrund, parallel zur alten Section-Logik */
}
.pricing-overview__card:hover,
.pricing-overview__card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border-top-color: var(--color-warm);
}
.pricing-overview__card-label {
    font-size: 0.8rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.pricing-overview__card-title {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-accent-strong);
    font-weight: 600;
    line-height: 1.3;
}
.pricing-overview__card-teaser {
    margin: 0;
    color: var(--color-text);
    font-size: 0.95rem;
    flex-grow: 1;
}
.pricing-overview__card-cta {
    margin-top: 0.25rem;
    color: var(--color-warm);
    font-weight: 500;
}

/* --- Pricing-Cross-Navigation (am Fuß jeder Detail-Seite) ---------- */

.pricing-crossnav {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}
.pricing-crossnav__heading {
    margin: 0 0 1rem;
    font-size: 1.2rem;
    color: var(--color-accent-strong);
}
.pricing-crossnav__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 600px) {
    .pricing-crossnav__cards { grid-template-columns: 1fr; }
}
.pricing-crossnav__card {
    display: block;
    padding: 1rem 1.2rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-accent-strong);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.pricing-crossnav__card:hover,
.pricing-crossnav__card:focus-visible {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    color: #fff;
    transform: translateY(-2px);
}
.pricing-crossnav__card-label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 0.15s ease;
}
.pricing-crossnav__card-title {
    display: block;
    font-weight: 500;
    font-size: 1.05rem;
}
.pricing-crossnav__card:hover .pricing-crossnav__card-label,
.pricing-crossnav__card:focus-visible .pricing-crossnav__card-label {
    color: rgba(255, 255, 255, 0.75);
}
.pricing-crossnav__overview {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: 0.95rem;
}

/* --- Scroll-Reveal-Utility ----------------------------------------
 * Elements with class "reveal" faden + lift in beim Scrollen in den
 * Viewport. Progressive Enhancement: der versteckte Start-State greift
 * nur, wenn JavaScript aktiv ist (die `js`-Class wird synchron in
 * App.razor's <head> auf <html> gesetzt). Ohne JS bleibt jedes
 * .reveal-Element von Anfang an sichtbar — kein Mystery-Inhalt.
 * reveal.js fuegt 'is-visible' per IntersectionObserver hinzu;
 * prefers-reduced-motion schaltet die Animation komplett aus. */
.js .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .js .reveal,
    .js .reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --- Page-CTA (Detail-Seiten) -------------------------------------- */

/* Conversion-Button am Fuss jeder Portfolio-/Preise-Detail-Seite.
   Coral als Marken-Akzent; Hover wechselt auf Warm-Rot mit Lift. */
.page-cta {
    margin: 2rem 0 0;
    text-align: center;
}
.page-cta__button {
    display: inline-block;
    padding: 0.85rem 1.8rem;
    background: var(--color-coral);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.02rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.page-cta__button:hover,
.page-cta__button:focus-visible {
    background: var(--color-warm);
    color: #fff;
    transform: translateY(-1px);
}

/* --- NotFound (/not-found) ----------------------------------------- */

.notfound-suggestions {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.notfound-suggestions a {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-accent-strong);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.notfound-suggestions a:hover,
.notfound-suggestions a:focus-visible {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    color: #fff;
}

/* --- Portfolio-Hero-Band ------------------------------------------- */
/* Vollbreites Bild-Band im BeforeMain-Slot (ueber dem H1). Responsive
   Bandhoehe via clamp; object-fit:cover beschneidet das Bild sauber.
   object-position kommt per Inline-Style aus dem Focus-Parameter (pro
   Motiv justierbar). line-height:0 schluckt den Inline-Whitespace unter
   dem <img>. margin-bottom gibt der Ueberschrift darunter Luft. */
.portfolio-hero { width: 100%; line-height: 0; margin-bottom: 2.5rem; }
.portfolio-hero__img {
    display: block;
    width: 100%;
    height: clamp(220px, 34vw, 400px);
    object-fit: cover;
}

/* --- Kontaktformular-Anker ----------------------------------------- */
/* Scroll-Ziel der "… anfragen"-CTAs. scroll-margin-top haelt beim
   Heranscrollen etwas Abstand zur Viewport-Oberkante, sodass der
   Formular-Titel nicht direkt am Rand klebt. */
#kontaktformular { scroll-margin-top: 1.5rem; }

/* --- Contact-Info-Grid --------------------------------------------- */
/* Vier Info-Bloecke (Ansprechpartner / Buero / Studio / Erreichbarkeit)
   nebeneinander statt gestapelt — auto-fit bricht auf schmalen Displays
   automatisch um. minmax(13rem, …) haelt die Karten lesbar breit, ohne
   auf grossen Screens unnoetig in die Hoehe zu wachsen. */
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.5rem 2rem;
    margin: 1.5rem 0 2.5rem;
}
.contact-info-grid__card { margin: 0; }
.contact-info-grid__card h2 {
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
}
.contact-info-grid__card p { margin: 0; }

/* --- Contact-Channels ---------------------------------------------- */

.contact-channels {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.4rem;
}
.contact-channels .label { color: var(--color-muted); margin-right: 0.5rem; }

/* --- AGB-Quellenhinweis -------------------------------------------- */

.terms-source {
    margin-top: 2rem;
    font-size: 0.85rem;
    color: var(--color-muted);
    font-style: italic;
}

/* --- Portrait-Intro (About + Kontakt) ------------------------------ */

.portrait-intro {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    align-items: center;
    margin-bottom: 2rem;
}
.portrait-intro > picture {
    flex: 0 0 220px;
    display: block;
    line-height: 0;
}
.portrait-intro > picture > img {
    width: 100%;
    height: auto;
    border-radius: 50%;       /* rundes Portrait — die Aquarell-Aesthetik des Logos aufgreifend */
    display: block;
}
.portrait-intro .lead {
    flex: 1 1 16rem;
    margin: 0;
}
@media (max-width: 480px) {
    .portrait-intro { gap: 1.25rem; }
    .portrait-intro > picture { flex: 0 0 160px; margin-inline: auto; }
}

/* --- About-CTA-Block ----------------------------------------------- */

.about-cta {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--color-bg-alt);
    border-radius: 4px;
}

/* --- ContactForm --------------------------------------------------- */

.contact-form { margin-top: 1.5rem; }
.contact-form__sent {
    padding: 1.25rem;
    background: #e6f4ea;
    border: 1px solid #b6e0bc;
    border-radius: 4px;
    color: #1a4d2a;
}
.contact-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}
@media (max-width: 640px) {
    .contact-form__grid { grid-template-columns: 1fr; }
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.form-field--full { grid-column: 1 / -1; }
.form-field > span {
    font-size: 0.9rem;
    color: var(--color-text);
}
.form-field.is-required > span::after {
    content: " *";
    color: #b00020;
}
.form-field input,
.form-field textarea {
    font: inherit;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-bg);
    color: var(--color-text);
}
.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent-soft);
}
.form-field__error {
    color: #b00020;
    font-size: 0.85rem;
}

.contact-form__error {
    padding: 0.75rem 1rem;
    background: #fdecea;
    border: 1px solid #f5c2c0;
    border-radius: 3px;
    color: #6b1414;
}

.contact-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.contact-form__required-footnote {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.btn-primary,
.btn-secondary {
    font: inherit;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid currentColor;
}
.btn-primary {
    background: var(--color-warm);
    border-color: var(--color-warm);
    color: #fff;
    font-weight: 600;
}
.btn-primary:disabled { opacity: 0.6; cursor: progress; }
.btn-secondary {
    background: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
}
.btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }