/* Regular (if you have it) */
@font-face {
    font-family: "Henriette";
    src: url("fonts/henriette/Henriette-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Regular Italic */
@font-face {
    font-family: "Henriette";
    src: url("fonts/henriette/Henriette-RegularItalic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Medium (maps to 500) */
@font-face {
    font-family: "Henriette";
    src: url("fonts/henriette/Henriette-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Henriette";
    src: url("fonts/henriette/Henriette-MediumItalic.otf") format("opentype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: "Henriette";
    src: url("fonts/henriette/Henriette-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Bold Italic */
@font-face {
    font-family: "Henriette";
    src: url("fonts/henriette/Henriette-BoldItalic.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Heavy (choose 800 or 900 depending on appearance) */
@font-face {
    font-family: "Henriette";
    src: url("fonts/henriette/Henriette-Heavy.otf") format("opentype");
    font-weight: 900; /* or 800 if it looks closer */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Henriette";
    src: url("fonts/henriette/Henriette-HeavyItalic.otf") format("opentype");
    font-weight: 900; /* or 800 if it looks closer */
    font-style: italic;
    font-display: swap;
}


/* Reset & Basics */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.5;
    color: #003763;
    overflow-x: hidden;
}

p, div, input, button, span, pre, li {
    font-size: clamp(1rem, 1vw + 1rem, 1.4rem);
    color: #003763;
}

/* Hero Section */
.hero-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
    z-index: 1;
}

/* Media queries für verschiedene Orientierungen */
@media (orientation: portrait) {
    .hero-image {
        width: 100%;
        height: auto;
        min-height: 100vh;
    }
}
@media (orientation: landscape) {
    .hero-image {
        width: auto;
        height: 100vh;
        min-width: 100vw;
    }
}

/* Header Navigation */
.header-nav {
    position: absolute;
    top: 6%;
    left: 0;
    right: 0;
    z-index: 200;
    width: 70%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-title {
    font-family: 'Henriette', serif;
    font-size: clamp(0.8rem, 1.8vw + 0.6rem, 2rem);
    color: #fff;
    /*text-shadow: 2px 2px 4px rgba(0,0,0,0.5);*/
    margin: 0;
}

/* ===== 5-Strich Hamburger: außen dicker & länger, Mitte dünner ===== */
.hamburger-menu {
    /* leicht größer, damit die breiteren Striche Platz haben */
    --burger-w: 43px;
    --burger-h: 30px;

    /* Abstände & Dimensionen */
    --gap: 3px;
    --inner-h: 2px;   /* dünne Mittelstriche */
    --outer-h: 4px;   /* dickere Außenstriche */
    --inner-w: 95%;   /* etwas kürzer als außen */
    --outer-w: 100%;

    width: var(--burger-w);
    height: var(--burger-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;   /* kürzere Mittellinien sauber zentrieren */
    gap: var(--gap);
    cursor: pointer;
}

/* Reset evtl. alter Margin/Height-Werte und neue Breiten/Höhen setzen */
.hamburger-menu span {
    margin: 0 !important;
    display: block;
    width: var(--inner-w);
    height: var(--inner-h);
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    transition: background-color .2s ease;
}

/* Oberster & unterster Strich: dicker + länger */
.hamburger-menu span.outer{
    width: var(--outer-w);
    height: var(--outer-h);
}

/* Hover/Focus */
.hamburger-menu:hover span,
.hamburger-menu:focus-visible span{ background-color: #f0f0f0; }


/* Intro: Logo soll sich in der Höhe an den Text anpassen */
.intro-container {
    position: absolute;
    top: 30vh;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 250;
    display: flex;
    align-items: stretch;          /* beide Kinder gleich hoch */
    width: 70%;
    color: #fff;
}

.logo-container {
    flex-shrink: 0;
    min-width: 200px;
    margin-right: max(2%, 50px);   /* 2% aber min. 50px */
    display: flex;                 /* damit das Logo <img> sich strecken kann */
    align-items: stretch;
}

.logo-container img {
    width: 25vw;
    object-fit: contain;           /* nicht verzerren */
    max-height: min(calc(33vw - 40px), calc(100% - 50px));
}

/* Text bleibt wie gehabt */
.intro-text-container {
    position: relative;
    flex: 1;
}
.intro-text {
    font-size: clamp(0.8rem, 1vw + 0.5rem, 1.8rem);
    text-align: left;
    color: #fff;
}

.cta-button {
    position:absolute;
    right:0px;
    background: rgba(255,255,255,0.15);
    font-family: 'Henriette', serif;
    font-weight:bold;
    font-size: clamp(0.8rem, 1vw + 0.5rem, 1.8rem);
    color: #fff;
    margin:80px 0;
    border: 2px solid #fff;
    border-radius: 40px;
    padding: 12px 64px 12px 64px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    width: fit-content;
}
.cta-button:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}

/* Vollbild-Sektionen ohne Trennlinien */
.page-section {
    position: relative;

    /* Full-bleed Hintergrund */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* Bühne: zentriere EIN Kind vertikal – den inneren Wrapper */
    /* display: flex; */

    display:block;
    align-items: center;     /* Standard: vertikal mittig */
}

.page-maxheight {
    /* 100vh stabil auf Mobil */
    /*min-height: 100dvh; WENN .page-section: display: flex;*/

    min-height: auto;
}

/* Innerer Content-Wrapper: hält Breite/Abstände und stapelt Titel + Inhalt */
.page-section .section-inner {
    width: 70%;
    margin: 0 auto;
    display: grid;           /* sauberer vertikaler Flow */
    row-gap: 1.25rem;
    padding: 2rem 0;         /* Innenabstand ohne Höhe zu verkürzen */
}

/* Falls du eine Section oben statt mittig ausrichten willst: */
.page-section.align-top { align-items: flex-start; }
/*.page-section.align-top .section-inner { padding-top: clamp(32px, 8vh, 96px); }*/

/* Abschnittstitel */
.section-title, #book-title {
    font-family: 'Henriette', serif;
    font-weight: 800;
    color: #003763;
    font-size: clamp(2rem, 1.8vw + 1.8rem, 3rem);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}


/* Gemeinsame Container-Breite + feinjustierbarer Logo-Offset */
:root {
    --container-w: 70%;
    --logo-nudge: 0px;   /* bei Bedarf z.B. -12px setzen */
}

/* gleiche Breite + gleiche Mitte für Header & Intro */
.header-nav,
.intro-container {
    width: var(--container-w);
    margin-left: auto;
    margin-right: auto;
}

/* Logo bündig links, ohne Inline-Gap, optionales Nudge bei PNG-Rand */
.logo-container img {
    display: block;          /* kein Inline-Whitespace */
    object-fit: contain;
    object-position: left;   /* Bildinhalt zur linken Kante */
    transform: translateX(var(--logo-nudge));
}

/* Bild abdunkeln (Overlay über der hero-image, unter Content) */
.hero-image { filter: brightness(.5) contrast(0.8); }


/* Mobile: oben beginnen (wie in XD-Phone), etwas schmaler */
@media (max-width: 900px) {
    .page-section { align-items: flex-start; }
    .page-section .section-inner { width: 85%; padding: 1.5rem 0 2rem; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-section {
        width: 85%;
        padding: 48px 0;
    }

    .header-nav { width: 85%; }

    .intro-container {
        top: 20vh;
        flex-direction: column;
        /* WICHTIG: linksbündig statt zentriert */
        align-items: flex-start;
        text-align: left;
        gap: 1.5rem;
        width: 85%;
    }

    .logo-container {
        width: auto;
        min-width: 70vw;
        margin: 0;
        /* zur Sicherheit links ausrichten */
        align-self: flex-start;
    }

    .logo-container img {
        width:70vw;
        height: auto;
        max-height: 33vh;
        margin: 0;
        object-position: left;
    }
}

/* ===== Overlay-Stack für Meldungen (oben fixiert) ===== */
.notify-stack{
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: min(70%, 900px);
    max-width: calc(100vw - 24px);
    z-index: 9999;

    display: grid;
    gap: 10px;

    /* Klicks drunter bleiben möglich, nur Boxen selbst clickable */
    pointer-events: none;
}
.notify-stack .message-box{
    margin: 0;
    pointer-events: auto;
}

/* sanftes Einblenden */
@keyframes toast-in {
    from { transform: translate(-50%, -10px); opacity: 0; }
    to   { transform: translate(-50%, 0);     opacity: 1; }
}
.notify-stack .message-box{
    animation: toast-in 220ms ease-out both;
}

/* Mobile: gleiche Logik, aber an deine Breite angepasst */
@media (max-width: 900px){
    .notify-stack{ width: 85%; }
    .btn {
        width:80vw;
    }
    .btn, .section-title, #book-title {
        margin:0 auto;
    }
}


/* ===== Message Boxes (Kontakt / Overlay) ===== */
.message-box{
    --brand: #003763;
    --ok:    #1e8e3e;   /* Erfolgs-Akzent */
    --err:   #c62828;   /* Fehler-Akzent */

    display: flex;
    align-items: flex-start;
    gap: 12px;

    background: #fff;
    color: var(--brand);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);

    /* Für Overlay-Stack: Container hat gap, daher kein Außenabstand */
    margin: 0;

    /* klickbar trotz .notify-stack { pointer-events:none } */
    pointer-events: auto;

    /* sanftes Einblenden */
    animation: toast-in 220ms ease-out both;
}

.message-box .icon{
    flex: 0 0 28px;
    width: 28px; height: 28px;
    border-radius: 50%;
    font-weight: 800;
    line-height: 28px;
    text-align: center;
    color: #fff;
}

.message-box .msg{
    line-height: 1.45;
    font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.1rem);
}

/* Varianten */
.message-box.success{
    border-left-color: var(--ok);
    background: rgba(30,142,62,0.5);
}
.message-box.success .icon{ background: var(--ok); }

.message-box.error{
    border-left-color: var(--err);
    background: rgba(198,40,40,0.5);
}
.message-box.error .icon{ background: var(--err); }

/* Auto-Hide */
.message-box.autohide{
    animation: toast-in 220ms ease-out both, toast-hide 6s 4s forwards;
}

/* Keyframes */
@keyframes toast-in{
    from { transform: translateY(-6px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes toast-hide{
    to { opacity: 0; transform: translateY(-6px); }
}

/* ease out */
@keyframes toast-hide {
    to { opacity: 0; transform: translate(-50%, -10px); }
}
.notify-stack .message-box.autohide{
    animation: toast-in 220ms ease-out both, toast-hide 4s 2s forwards;
    /* erscheint schnell, bleibt 4s, blendet in 4s langsam aus */
}

/* Mobile Feinschliff */
@media (max-width: 800px){
    .message-box{ padding: 12px; border-left-width: 5px; }
    .message-box .icon{ width: 26px; height: 26px; line-height: 26px; }
}

.white-text {
    color:white !important;
}

h1.blue-text {
    color:#003763 !important;
}
span.blue-text {
    background-color: #003763 !important;
}