/* ==========================================================================
   Hauptstylesheet – Dr. Eva Placheta-Györi
   ==========================================================================
   Reihenfolge: Tokens → Reset → Basis → Layout → Komponenten → Mobile
   ========================================================================== */

@import url("./_tokens.css");


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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 1px;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}


/* ==========================================================================
   Layout-Container
   ==========================================================================
   Site bleibt ueber 1920px zentriert; Innenpadding fluid 21–140px. */
.page {
    max-width: var(--layout-max-width);
    margin-inline: auto;
    padding-inline: var(--layout-container-padding);
}


/* ==========================================================================
   Intro – Hero + Title fuellen gemeinsam 100vh
   ==========================================================================
   Hero sitzt oben mit Abstand zur Fensterkante, Title sitzt unten mit
   demselben Abstand zur unteren Kante. Whitespace dazwischen ist variabel
   (waechst mit der Fensterhoehe). Bei zu wenig Hoehe verhindert min-height
   einen Overlap (Inhalte stossen mit Mindestabstand aneinander). */
.intro {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-2xl);
    padding-top: 30px;
    padding-bottom: 30px;
}


/* ==========================================================================
   Site-Header (Subseiten – Burger | Logo | CTA)
   ==========================================================================
   Sitzt im normalen Flow. Wenn das Menue offen ist, wird der Header per
   z-index ueber das Overlay gehoben und seine Inhalte wechseln auf weiss
   (Logo) bzw. werden ausgeblendet (CTA). Der Burger animiert zum X. */
.site-header {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: var(--space-md);
    padding-top: 55px;
    padding-bottom: var(--space-md);
}

body.is-menu-open .site-header {
    z-index: 1001;
}

/* Burger – 3 Linien als reine span-Elemente fuer animierbare Transformation
   zum X. Linienstaerke 4px (Desktop) bzw. 2px (Mobile, ueber Container-Skalierung
   bzw. eigenen Override). */
.site-header__burger {
    position: relative;
    justify-self: start;
    width: 64.5px;
    height: 32px;
    color: var(--color-primary);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color 0.3s ease;
}

.site-header__burger-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: currentColor;
    transition: transform 0.3s ease,
                opacity 0.2s ease,
                top 0.3s ease;
}

.site-header__burger-line:nth-child(1) { top: 0; }
.site-header__burger-line:nth-child(2) { top: calc(50% - 2px); }
.site-header__burger-line:nth-child(3) { top: calc(100% - 4px); }

/* Burger -> X wenn Menue offen. Mittlere Linie verblasst, aussere
   Linien rotieren in die Mitte und ueberkreuzen sich. */
body.is-menu-open .site-header__burger {
    color: var(--color-overlay-text);
}
body.is-menu-open .site-header__burger-line:nth-child(1) {
    top: calc(50% - 2px);
    transform: rotate(45deg);
}
body.is-menu-open .site-header__burger-line:nth-child(2) {
    opacity: 0;
}
body.is-menu-open .site-header__burger-line:nth-child(3) {
    top: calc(50% - 2px);
    transform: rotate(-45deg);
}

.site-header__logo {
    justify-self: center;
    margin: 0;
    font-family: var(--font-family-logo);
    font-size: var(--font-size-logo-header);
    line-height: 1.21;
    letter-spacing: var(--letter-spacing-hero);
    color: var(--color-primary);
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.3s ease;
}

body.is-menu-open .site-header__logo {
    color: var(--color-overlay-text);
}

.site-header__cta {
    justify-self: end;
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    color: var(--color-primary);
    white-space: nowrap;
    transition: opacity 0.3s ease, visibility 0.3s;
}

body.is-menu-open .site-header__cta {
    opacity: 0;
    visibility: hidden;
}


/* ==========================================================================
   Menue-Overlay (Vollbild, solid gruen, Fade-Animation)
   ==========================================================================
   Das Menue hat keinen eigenen Header – Site-Header bleibt sichtbar (per
   z-index ueber dem Overlay) und stellt das weisse Logo + den X-Button. */
.menu {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: var(--color-overlay-bg);
    color: var(--color-overlay-text);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-inline: var(--layout-container-padding);
    /* Fade-Transition. Beim Schliessen wird visibility erst nach Fade-Out
       auf hidden gesetzt, damit der Inhalt waehrend des Fades sichtbar bleibt. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.menu.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0s linear 0s;
}

body.is-menu-open {
    overflow: hidden;
}

.menu__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.menu__list {
    list-style: none;
    margin: 0;
    padding: 180px 0 0;
    text-align: center;
}

.menu__link {
    display: block;
    padding: var(--space-2xs) 0;
    font-size: var(--font-size-h1);
    line-height: 1.65;
    color: inherit;
    text-decoration: none;
}

.menu__link:hover,
.menu__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.menu__list-spacer {
    height: var(--space-lg);
}

.menu__footer {
    text-align: center;
    padding-block: var(--space-2xl);
}

.menu__impressum {
    font-size: var(--font-size-micro);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-micro);
    color: inherit;
}


/* ==========================================================================
   Hero (Startseite – grosses Logo "E.P–G")
   ========================================================================== */
.hero {
    text-align: center;
}

.hero__logo {
    margin: 0;
    font-family: var(--font-family-logo);
    font-size: var(--font-size-hero);
    line-height: 1;
    letter-spacing: var(--letter-spacing-hero);
    color: var(--color-primary);
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
}


/* ==========================================================================
   Title – Namensband mit Untertitel und CTA
   ==========================================================================
   Layout im Desktop:
       Eva ........ Placheta ........ Györi
       ─────────────────────────────────────
       Plastische, Ästhetische ...      Termin vereinbaren
   Vertikale Position: durch .intro space-between gesteuert. */
.title {
    padding-top: 0;
}

.title__names {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.title__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    border-top: var(--border-width-line) solid var(--color-line);
    padding-top: var(--space-xs);
    margin-top: var(--space-xs);
}

.title__name,
.title__subtitle,
.title__cta {
    margin: 0;
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    color: var(--color-primary);
    font-weight: var(--font-weight-regular);
}

.title__cta {
    text-align: right;
}


/* ==========================================================================
   Services – "Leistungsspektrum" + 3 Cards
   ========================================================================== */
.services {
    padding-top: var(--pad-section-large);
    text-align: center;
}

.services__title {
    margin: 0 0 var(--space-2xl);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-regular);
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.service-card {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 520 / 260;
    background-color: var(--color-surface);
    color: var(--color-primary);
    text-align: center;
    transition: background-color var(--transition-base),
                color var(--transition-base),
                transform var(--transition-base);
}

.service-card:hover,
.service-card:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    text-decoration: none;
}

/* Active – die Karte des aktuellen Bereichs ist permanent invertiert
   (gleiche Optik wie hover, signalisiert "du bist hier"). */
.service-card--active {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    pointer-events: none;
}

.service-card__title {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    color: inherit;
}


/* ==========================================================================
   About – "Über mich" + Text-Block + Bild
   ========================================================================== */
.about {
    padding-top: var(--pad-section-large);
}

.about__title {
    margin: 0 0 var(--space-xl);
    text-align: center;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-regular);
}

.about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 200px);
    align-items: start;
}

.about__text > p {
    margin: 0 0 var(--space-md);
}

.about__text > p:last-child {
    margin-bottom: 0;
}

.about__media {
    margin: 0;
    text-align: center;
}

.about__media-image {
    /* Bild bleibt bei 400px gedeckelt und ist in der rechten Spalte zentriert.
       Wird die Spalte schmaler als 400px, konsumiert das Bild die volle Breite. */
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
    aspect-ratio: 400 / 600;
    object-fit: cover;
}

.about__media-caption {
    margin-top: var(--space-sm);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}


/* ==========================================================================
   Subpage – Layout der drei Leistungs-Unterseiten
   ==========================================================================
   Linke Spalte: Heading + Lauftext. Rechte Spalte: Leistungs-Tabelle. */
.subpage__intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 200px);
    padding-top: var(--space-3xl);
    align-items: start;
}

.subpage__heading {
    margin: 0 0 var(--space-lg);
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    font-weight: var(--font-weight-regular);
}

.subpage__body p {
    margin: 0 0 var(--space-md);
}

.subpage__body p:last-child {
    margin-bottom: 0;
}

.services-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* Kategorie-Block: Section ist Container, Kategorie-Titel sitzt absolut
   oben links, die Items nehmen die volle Breite. So liegt die Kategorie
   auf gleicher Hoehe wie das erste Item, ohne den Item-Flow zu beeinflussen. */
.services-list > section {
    position: relative;
}

.services-list__category-title {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: var(--space-xs) 0;
    font-size: var(--font-size-body);
    line-height: 1.2;
    font-weight: var(--font-weight-regular);
}

.services-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.services-list__item {
    border-top: var(--border-width-line) solid var(--color-line);
    padding: var(--space-xs) 0;
    font-size: var(--font-size-list-item);
    line-height: 1.1;
    text-align: center;
}

.services-list__item:last-child {
    border-bottom: var(--border-width-line) solid var(--color-line);
}

.subpage__cards {
    padding-block: var(--pad-section-large);
}


/* ==========================================================================
   Impressum (Legal-Page, nicht im Figma vorhanden)
   ========================================================================== */
.impressum {
    max-width: 800px;
    margin-inline: auto;
    padding-block: var(--pad-section-large);
}

.impressum h1 {
    margin: 0 0 var(--space-lg);
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    font-weight: var(--font-weight-regular);
}

.impressum h2 {
    margin: var(--space-lg) 0 var(--space-xs);
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    font-weight: var(--font-weight-regular);
    border-bottom: var(--border-width-line) solid var(--color-line);
    padding-bottom: var(--space-2xs);
}

.impressum p {
    margin: 0 0 var(--space-md);
    line-height: 1.5;
}


/* ==========================================================================
   Footer
   ==========================================================================
   Zwei Zeilen:
       Dr.-Titel (links)         Fachbezeichnung (rechts)
       ──────────────────────────────────────────────────
       Termin / Telefon / Mail / Adresse / Impressum     */
.footer {
    max-width: var(--layout-max-width);
    margin-inline: auto;
    padding: var(--pad-section-large) var(--layout-container-padding) var(--space-2xl);
}

.footer__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.footer__title,
.footer__subtitle {
    margin: 0;
    font-size: var(--font-size-body);
    line-height: 1.4;
}

.footer__divider {
    width: 100%;
    height: var(--border-width-line);
    background-color: var(--color-line);
    border: 0;
    margin: var(--space-2xs) 0 var(--space-xs);
}

/* Zusaetzliche Linie zwischen Titel und Untertitel – nur im Mobile sichtbar.
   Im Desktop liegen Titel/Untertitel nebeneinander, da macht eine Trennlinie
   keinen Sinn. */
.footer__divider--inner {
    display: none;
}

.footer__links {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-body);
    line-height: 1.728;
}

/* Mobile-Variante (kuerzere Labels) ist standardmaessig versteckt;
   Wechsel im Mobile-Mediaquery weiter unten. */
.footer__links--mobile {
    display: none;
}

.footer__sep {
    opacity: 0.6;
    user-select: none;
}


/* ==========================================================================
   Tablet / kleinere Desktops (768–1199px)
   ==========================================================================
   Zwischenstufe zwischen 1920er-Desktop und 414er-Mobile. Module, die
   sonst zu eng wuerden (Footer-Links inline, About-Grid mit 240px Gap),
   werden hier bereits flexibler. */
@media (max-width: 1199px) {
    .about__grid {
        gap: clamp(40px, 6vw, 120px);
    }

    .footer__links {
        justify-content: flex-start;
        gap: var(--space-2xs) var(--space-sm);
    }
}


/* ==========================================================================
   Mobile (<768px)
   ==========================================================================
   Mobile-Artboard ist 414px (iPhone XR/XS Max/11). Logische Uebertragung
   auch auf Module, die im Artboard nicht explizit gezeigt sind. */
@media (max-width: 767px) {
    /* Header (Subseiten) – CTA ausblenden, Burger kleiner mit 2px-Linien. */
    .site-header {
        padding-top: 24px;
        padding-bottom: var(--space-sm);
    }
    .site-header__burger {
        width: 32px;
        height: 14px;
    }
    .site-header__burger-line {
        height: 2px;
    }
    .site-header__burger-line:nth-child(2) { top: calc(50% - 1px); }
    .site-header__burger-line:nth-child(3) { top: calc(100% - 2px); }

    body.is-menu-open .site-header__burger-line:nth-child(1),
    body.is-menu-open .site-header__burger-line:nth-child(3) {
        top: calc(50% - 1px);
    }

    .site-header__cta {
        display: none;
    }

    /* Menue – kleinere Schrift, kompaktere Abstaende. */
    .menu__list {
        padding: 90px 0 0;
    }
    .menu__link {
        font-size: var(--font-size-h2);
        padding: var(--space-3xs) 0;
        line-height: 1.4;
    }
    .menu__list-spacer {
        height: var(--space-md);
    }
    .menu__footer {
        padding-block: var(--space-md);
    }

    /* Im Mobile reicht ein etwas groesserer Mindestabstand zwischen Hero
       und Title, der Rest erledigt .intro mit space-between und 100vh. */
    .intro {
        gap: var(--space-3xl);
    }

    .title {
        text-align: center;
    }

    /* Names werden zu einem zusammenhaengenden Namen "Eva Placheta-Györi"
       (Bindestrich nur zwischen Placheta und Györi, nicht zwischen Eva). */
    .title__names {
        display: block;
        text-align: center;
    }
    .title__name {
        display: inline;
    }
    .title__name + .title__name {
        margin-left: 0.25em;
    }
    .title__name:last-child {
        margin-left: 0;
    }
    .title__name:last-child::before {
        content: "-";
    }

    /* Subtitle und CTA in eigene Zeilen, jeweils mit Linie davor. */
    .title__row {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }
    .title__row > * {
        border-top: var(--border-width-line) solid var(--color-line);
        padding-top: var(--space-xs);
        margin-top: var(--space-xs);
        text-align: center;
    }

    .services {
        padding-top: var(--pad-section-medium);
    }

    .services__title {
        margin-bottom: var(--space-md);
    }

    .services__grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .service-card {
        aspect-ratio: 367 / 213;
    }

    .about {
        padding-top: var(--pad-section-medium);
    }

    .about__grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    /* Subpages – linke und rechte Spalte stapeln. */
    .subpage__intro {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        padding-top: var(--pad-section-medium);
    }

    .subpage__cards {
        padding-block: var(--pad-section-medium);
    }

    /* Im Mobile-Artboard kommt das Bild VOR dem Text. */
    .about__media {
        order: -1;
    }

    .about__media-image {
        max-width: 367px;
        margin-inline: auto;
    }

    .footer {
        padding-block: var(--pad-section-medium);
        text-align: center;
    }

    .footer__top {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3xs);
    }

    /* Im Mobile alle Footer-Texte einheitlich 12px. */
    .footer__title,
    .footer__subtitle {
        font-size: 12px;
        line-height: 1.4;
    }

    /* Linien zwischen Titel/Untertitel/Links – kompaktes Mobile-Spacing. */
    .footer__divider {
        margin: var(--space-2xs) 0 var(--space-2xs);
    }
    .footer__divider--inner {
        display: block;
    }

    /* Wechsel der Link-Liste: Desktop aus, Mobile ein. */
    .footer__links--desktop {
        display: none;
    }

    .footer__links--mobile {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        gap: var(--space-3xs) var(--space-2xs);
        font-size: 12px;
        width: 100%;
    }
}