/* =========================================
   AVALIS – Global Styles (ein Stylesheet)
   ========================================= */

/* ---------- CSS Vars ---------- */
:root{
    /* Palette */
    --bg:#f07f7f;              /* Standard-Hintergrund (Age-Gate) */
    --text:#111;
    --muted: #fa6b69;           /* Braun für Buttons/Text */
    --muted-2:#5a4a45;         /* Hover */
    --white:#fff;

    /* Onepager-Segmentfarben */
    --seg-hero:#5c2626;
    --seg-plug:#5c2626;
    --seg-about:#7a3e39;
    --seg-ink-hero:#fde0d1;
    --seg-ink-plug:#f8dbc9;
    --seg-ink-about:#ffe8db;

    /* Misc */
    --shadow: 0 10px 30px rgba(0,0,0,.15);
    --radius: 999px;

    /* iPhone safe areas */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Base / Reset ---------- */
*{ box-sizing:border-box }
html, body{ height:100% }
html{ scroll-behavior:smooth } /* Onepager */

/* Standard-Body (Age-Gate etc.) */
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    background: var(--bg);
    color: var(--text);
    display:grid; place-items:center;

    /* iOS fixes */
    min-height: 100svh;
    padding-top: var(--safe-top);
    padding-bottom: calc(16px + var(--safe-bottom));
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Body-Varianten */
body.home{ background: var(--seg-hero); color: var(--seg-ink-hero); display:block; }
body.underage{ background:#ffd6b6; display:block; }

/* ---------- Generic Containers & Type ---------- */
.wrap{ width:min(1000px, 92vw); text-align:center; position:relative; padding:64px 16px; z-index:1; }

.title{
    font-size: clamp(48px, 8vw, 120px);
    font-weight:900; letter-spacing:.02em; line-height:.9; margin:0 0 8px;
}
.subtitle{
    font-size: clamp(12px, 2vw, 22px);
    letter-spacing:.25em; text-transform:uppercase; font-weight:800; margin:0 0 40px;
}
.lead{ max-width:700px; margin:0 auto 36px; font-size:clamp(16px, 2.2vw, 20px); opacity:.9 }
.lead.small{ max-width:720px; margin:0 auto 28px; font-size:clamp(15px,2.4vw,18px); line-height:1.6; font-weight:400; color:#4a3a34; opacity:.95; letter-spacing:.2px; }

/* ---------- Buttons ---------- */
.actions{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; }
.btn{
    border:0; cursor:pointer; font-weight:800; font-size:18px;
    padding:14px 28px; border-radius:var(--radius); box-shadow:var(--shadow);
    transition: transform .08s ease, background .2s ease, box-shadow .2s ease;
    min-height:48px; touch-action:manipulation;
    text-decoration:none; display:inline-block;
}
.btn-primary{ background:var(--muted); color:var(--white) }
.btn-primary:hover{ background:var(--muted-2); transform:translateY(-1px) }
.btn-outline{ background:transparent; color:var(--muted); outline:2px solid var(--muted) }
.btn-outline:hover{ background:rgba(0,0,0,.05); transform:translateY(-1px) }

/* CTA-Spezial */
.cta-main{ display:inline-block; margin-top:8px; background:#ff7f73; color:#fff;
    padding:18px 28px; border-radius:999px; font-weight:900; text-decoration:none; box-shadow:var(--shadow); }
.cta-main:hover{ transform:translateY(-1px) }
.cta-side{
    position:fixed; left:12px; top:60vh; z-index:10; background:#ff7f73; color:#fff;
    padding:14px 18px; border-radius:16px; font-weight:800; text-decoration:none; box-shadow:var(--shadow);
    display:flex; align-items:center; gap:10px;
}
.cta-side .chev{ width:10px; height:10px; border-right:3px solid #fff; border-top:3px solid #fff; transform:rotate(-45deg); display:inline-block }



/*flower für anfang*/



/* ---------- Accessibility ---------- */
.sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================================
   NAVBAR + DRAWER (Onepager)
   ========================================= */
.navbar{
    display: grid;
    grid-template-columns: 1fr auto 1fr;  /* Mitte schrumpft auf Logo-Breite */
    align-items: center;
}
.navbar.scrolled{ box-shadow:0 6px 18px rgba(0,0,0,.2); }

.hamburger     { grid-column: 1; justify-self: start; }
.navbar .logo  { grid-column: 2; justify-self: center; display: block; }
.navbar-right  { grid-column: 3; justify-self: end; display: flex; gap: 10px; }
.hamburger span{ height:3px; background:#ffd6b6; border-radius:2px; display:block; }

/* rechte Icon-Leiste – immer sichtbar */
.navbar-right{ display:flex; gap:10px; align-items:center; }
.contact-link {
    display: inline-block;
    width: auto;
    height: auto;
    line-height: 0;       /* verhindert extra „Textfläche“ */
    border-radius: 0;     /* kein zusätzlicher Kreisrahmen */
    padding: 0;           /* kein Innenabstand */
}

.contact-link img,
.contact-link svg {
    display: block;
    width: 600px;    /* echte sichtbare Größe des Icons */
    height: 600px;
}



/* Off-Canvas Drawer */
.nav-drawer{
    position:fixed; inset:0 auto 0 0; width:min(80vw, 320px); background:#6a3631; color:#ffd6b6;
    transform:translateX(-100%); transition:transform .25s ease; padding:18px; z-index:1100;
}
.nav-drawer.open{ transform:translateX(0); }
.drawer-links{ display:flex; flex-direction:column; gap:14px; margin-top:10px; }
.drawer-link{ color:#ffd6b6; text-decoration:none; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.drawer-link:hover{ text-decoration:underline; }
.drawer-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1050; }

/* =========================================
   ONE-PAGER SEGMENTS / CARDS
   ========================================= */
.seg{padding:80px 0 ; width: 100%;}
/* Inhalt zentriert, aber Segment-Hintergrund zieht über ganze Seite */
.seg .section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    text-align: center;
}
.seg-hero{
    background: var(--seg-hero);
    color: var(--seg-ink-hero);
    position: relative;
    min-height: 100vh;        /* volle Höhe */
    display: flex;
    flex-direction: column;
    justify-content: center;  /* vertikal mittig */
    align-items: center;      /* horizontal mittig */
    text-align: center;
    padding: 80px 16px;       /* Platz für Navbar oben */
}
.seg-plug{ background:var(--seg-plug); color:var(--seg-ink-plug); }
.seg-about{ background:var(--seg-about); color:var(--seg-ink-about); }
.section{ width:min(1100px,94vw); margin:18px auto 40px; text-align:center; }
.section h2{ color:#fa6b69; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }

.cards{ display:grid; gap:16px; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:18px; }
.card.person{ background:rgba(0,0,0,.12); border-radius:16px; padding:16px; box-shadow:var(--shadow); color:inherit; }
.card.person .avatar{ width:100%; height:160px; background:rgba(0,0,0,.18); border-radius:12px; margin-bottom:10px; }

/* Hero spezifisch */
.hero .title{ color:#ffd6b6; font-size:clamp(64px, 12vw, 160px); }
.hero .subtitle{ color:#ffd6b6; opacity:.95; letter-spacing:.25em }
.hero .mission{ max-width:880px; margin:16px auto 28px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#f8dbc9; opacity:.9 }

/* =========================================
   UNDERAGE PAGE EXTRAS
   ========================================= */
.notice{ font-weight:900; font-size: clamp(20px, 3.8vw, 32px); color:#e85a61; margin:10px 0 12px; }
.muted-note{ margin-top:28px; opacity:.6; font-size:14px }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 900px){
    .cards{ grid-template-columns:1fr; }
}
@media (max-width: 700px){
    .cta-side{ position:static; display:inline-flex; margin:8px 12px; }
    .hero{ padding-bottom:36px }
}
@media (max-width: 480px){
    .title{ font-size: clamp(40px, 14vw, 72px); }
    .subtitle{ letter-spacing:.18em; margin-bottom:28px }
    .lead{ padding:0 8px; margin-bottom:24px }
    .actions{ flex-direction:column; gap:14px }
    .btn{ width:min(92vw, 420px); margin:0 auto }
    .flower{ width:min(44vw, 220px) }
}
@media (max-width: 360px){
    .flower{ display:none } /* ultraklein: Deko weg */
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce){
    .btn{ transition:none }
}


body.home{ background:#552c28; color:#fde0d1; scroll-behavior:smooth; }

/* ====== Sticky Topbar ====== */
.navbar{ position:fixed; top:0; left:0; width:100%; background:rgba(85,44,40,0.95); display:flex; justify-content:space-between; align-items:center; padding:10px 12px; z-index:1000; box-shadow:0 2px 6px rgba(0,0,0,0.3); }
.navbar .logo{ font-weight:900; font-size:20px; letter-spacing:.1em; color:#ffd6b6; text-decoration:none; }

/* Hamburger links */
.hamburger{ cursor:pointer; width:36px; height:26px; display:flex; flex-direction:column; justify-content:space-between; background:transparent; border:0; }
.hamburger span{ display:block; height:3px; background:#ffd6b6; border-radius:2px; }

/* Rechts: Kontakt-Icons – immer sichtbar */
.navbar-right{ display:flex; gap:10px; align-items:center; }
.contact-link{ display:inline-flex; width:30px; height:30px; border-radius:50%; align-items:center; justify-content:center; text-decoration:none; box-shadow: var(--shadow); }
.contact-link svg{ width:24px; height:24px }

/* Slideout Menu */
.side-menu{ position:fixed; top:0; left:-260px; width:240px; height:100%; background:#6a3631; padding:60px 20px; transition:left .28s ease; z-index:2000; display:flex; flex-direction:column; gap:20px; }
.side-menu.active{ left:0; }
.side-menu a{ color:#ffd6b6; font-weight:700; text-decoration:none; }

/* Hero Section */
.hero{ width:min(1200px,96vw); margin:80px auto 0; text-align:center; position:relative; padding:40px 16px 72px; }
.hero .title{ color:#ffd6b6; font-size: clamp(64px, 12vw, 160px); }
.hero .subtitle{ color:#ffd6b6; opacity:.95; letter-spacing:.25em }
.hero .mission{ max-width:880px; margin:16px auto 28px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#f8dbc9; opacity:.9 }
.cta-main{ display:inline-block; margin-top:8px; background:#ff7f73; color:#fff; padding:18px 28px; border-radius:999px; font-weight:900; text-decoration:none; box-shadow: var(--shadow); }

/* Sections */
section{ padding:80px 16px; text-align:center; }
section.alt{ background:#6a3631; }
section h2{ font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:#ffd6b6; margin-bottom:16px; }
section p{ max-width:800px; margin:0 auto; color:#f8dbc9; font-size:18px; line-height:1.6; margin-bottom: 15px;}


.hero-logo {
    max-width: min(90vw, 600px);  /* passt sich an Bildschirmgröße an */
    height: auto;
    margin-bottom: 5px;          /* Abstand zum Button */
    display: block;
}


/* Nur für Hero-Blumen */
/* ---------- Deko-Blumen für alle anderen Seiten (nicht Home) ---------- */
body:not(.home) .flower {
    position: absolute;
    opacity: .75;
    pointer-events: none;
    bottom: -20px;
    width: min(42vw, 320px);
    z-index: 0;
}
body:not(.home) .flower.right { right: -20px; bottom: -10px; }
body:not(.home) .flower.left  { left: -20px; transform: scaleX(-1); }

/* ---------- Hero-Blumen (nur Home-Startseite) ---------- */
.flower.hero-left,
.flower.hero-right {
    position: absolute;
    bottom: 0;                 /* am Boden ausrichten */
    height: 40%;               /* Höhe relativ zur Section */
    width: auto;
    max-width: clamp(160px, 20vw, 240px);
    opacity: .25;
    pointer-events: none;
    z-index: 0;
    object-fit: contain;
}

/* Linke Blume */
.flower.hero-left {
    left: 0;
    transform: scaleX(-1);
}

/* Rechte Blume */
.flower.hero-right {
    right: 0;
}




.flower.hero-left:hover {
    transform: scaleX(-1) rotate(-6deg) translateY(-10px);
    opacity: 0.35;
}

.flower.hero-right:hover {
    transform: rotate(6deg) translateY(-10px);
    opacity: 0.35;
}


/* Responsive: Blumen kleiner auf Mobile */
@media (max-width: 700px){
    .flower.hero-left,
    .flower.hero-right {
        width: 200px;
    }
}

.drawer-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1500; }

@media(max-width:700px){
    /* keine Text-Links rechts anzeigen – nur Icons sichtbar */
}

.seg-hero .hero {
    position: relative;
    z-index: 1;   /* über den Blumen */
}



/* CONTACT STYLEEE */

.contact-section{ background: var(--seg-hero); color: var(--seg-ink-hero); padding:120px 16px 80px; text-align:center; position:relative; }
.contact-section h1{ font-weight:900; font-size:clamp(24px,4vw,36px); margin-bottom:10px; letter-spacing:.12em; text-transform:uppercase; }
.contact-section p.lead{ max-width:700px; margin:0 auto 36px; font-size:18px; line-height:1.6; opacity:.9; }

form.contact-form{ max-width:800px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
form.contact-form input, form.contact-form textarea{
    width:100%; padding:12px 14px; border-radius:12px; border:2px solid var(--muted);
    font-size:16px; font-family:inherit; outline:none;
}
form.contact-form textarea{ grid-column:1/3; min-height:140px; resize:vertical; }
form.contact-form button{ grid-column:1/3; }

/* Social + Map Section */
/* Section vollflächig */
.contact-extra {
    background: var(--seg-plug);   /* eigene Segment-Farbe */
    color: var(--seg-ink-plug);
    padding: 80px 0;               /* kein seitliches Padding nötig */
    width: 100%;
}

/* Inhalt mittig ausgerichtet */
.extra-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 28px;
    align-items: start;
    max-width: 1200px;             /* Breite begrenzen */
    margin: 0 auto;                /* zentrieren */
    padding: 0 16px;               /* etwas Luft links/rechts */
}


.social-block h2{ font-weight:900; font-size:clamp(18px,3vw,24px); text-transform:uppercase; margin-bottom:14px; }
.social-icons{ display:flex; gap:16px; }
.social-icons a{ display:inline-flex; width:56px; height:56px; border-radius:50%; align-items:center; justify-content:center; background:#ffd9b8; box-shadow:var(--shadow); text-decoration:none; }
.social-icons svg{ width:28px; height:28px; }

.map-block h2{ font-weight:900; font-size:clamp(18px,3vw,24px); text-transform:uppercase; margin-bottom:14px; }
.map-placeholder{ width:100%; height:360px; background:#ddd; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#333; font-weight:700; box-shadow:var(--shadow); }

@media(max-width:800px){
    form.contact-form{ grid-template-columns:1fr; }
    form.contact-form textarea, form.contact-form button{ grid-column:1; }
    .extra-grid{ grid-template-columns:1fr; }
}

/* END CONTACT STYLEEEEE */

/* ===== About Section Layout ===== */
.about-grid{
    display: grid;
    grid-template-columns: 1.1fr 1fr; /* links etwas breiter */
    gap: 32px;
    align-items: center;
}
.about-media {
    position: relative;
    min-height: 300px;        /* damit der Container Platz hat */
}

/* About-Section: Text rechtsbündig */
.about-content {
    text-align: right;
    margin-left: auto;   /* schiebt den Textblock nach rechts */
    margin-right: clamp(16px, 6vw, 120px); /* schöner rechter Rand */
    max-width: 600px;    /* optional, damit die Zeilen nicht zu lang werden */
}


.about-flowers{
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events:none;
    z-index: 0;
}
.about-photo {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.about-photo img {
    max-width: 300px;         /* Größe anpassen */
    height: auto;
    border-radius: 20px;
    box-shadow: var(--shadow);
}

/* Blumen über dem Foto */
.about-flower {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}
.about-flower.flower1 {
    bottom: 120px; left: 40px;  /* etwas oberhalb links */
    width: 140px;
    z-index: 0;
}
.about-flower.flower2 {
    bottom: 80px; left: 180px;  /* etwas versetzt */
    width: 120px;
    z-index: 0;
}

#about {
    position: relative;   /* Bezugspunkt für absolute Elemente */
    overflow: hidden;     /* Blumen ragen nicht raus */
}

/* Container für Bild + Blumen */
.about-corner {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1; /* hinter dem Text, vor dem Hintergrund */
}

/* Foto */
.about-photo {
    max-width: 520px;   /* Größe des Fotos */
    border-radius: 20px;
    /*box-shadow: var(--shadow);*/
    display: block;
}

/* Blumen über Foto */
.about-flower {
    position: absolute;
    opacity: 100;
    pointer-events: none;
}

.about-flower.flower1 {
    bottom: 520px; left: -20px;
    width: 160px;
}
.about-flower.flower2 {
    bottom: 360px; left: 140px;
    width: 220px;
}



/* rechte Spalte */
.about-content h2{
    margin-top: 0;
}
.about-content p{
    color: var(--seg-ink-about);
    opacity: .95;
    line-height: 1.7;
    margin: 0 0 14px;
}
.about-content a{ color: #ffd6b6; text-underline-offset: 2px;margin-left: auto; margin-right: 0}
.about-content .btn{ margin-top: 10px; }

/* Hover-Interaktion für BG-Blumen (dezent) */
.about-media:hover .about-flowers{
    transform: translateY(-8px) rotate(-2deg);
    transition: transform .6s ease, opacity .6s ease;
    opacity: .32;
}

/* ABOUT: text block aligned to the right side of the section */
#about .section { position: relative; }           /* keeps context */


/* Optional: on mobile, center or left-align again for readability */
@media (max-width: 800px){
    #about .about-content{
        margin: 0 auto;
        text-align: left;
    }
}



.btn-home{ background:var(--muted); color:var(--white);}
.btn-home:hover{ background:var(--muted-2); transform:translateY(-1px) }

/* ===== Responsive ===== */
@media (max-width: 980px){
    .about-grid{
        grid-template-columns: 1fr;   /* untereinander */
        gap: 22px;
    }
    .about-media{ min-height: 300px; }
    .about-photo img{ max-width: 560px; margin: 0 auto; }
    .about-content{ text-align: left; }
}
@media (max-width: 640px){
    .about-media{ min-height: 240px; }
    .about-content{ text-align: left; }
}

/* ===== Werte Section ===== */
.values-title{
    margin-bottom: 26px;
    letter-spacing: .12em;
    text-align: left;
}

.values-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    /*gap: 20px 24px;       /* engeres Grid, weniger Abstand */
    gap: 1px 1px;
    margin-top: 20px;
}

/* Value-Karte */
.value{
    position: relative;
    min-height: 120px;    /* etwas kleiner als vorher */
    margin: 0;
}
.value-card{
    display:block;
    width: 100%;
    height: auto;            /* dein PNG bestimmt die Form */
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}

.value-body{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%); /* Text zentrieren */
    text-align: center;
    width: 80%;                        /* optional: Textbreite begrenzen */
    color: #3b302d;
}
.value:nth-child(2) .value-body,
.value:nth-child(4) .value-body{
    padding-left: 22px;
    padding-right: 100px;
}

/* Heading/Text */
.value-body h3{
    margin: 0 0 4px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: .05em;
    color: var(--seg-plug);
}
.value-body p{
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--seg-plug);
    opacity: .95;
}

/* Blumen */
.value-flower{
    position: absolute;
    top: 50%;
    width: 120px; /* was 72 */
    transform: translateY(-50%);
    opacity: .9;
    pointer-events: none;
}
.value-flower.left{
    left: -40px;
    transform: translateY(-50%) rotate(90deg);
}
.value-flower.right{
    right: -40px;
    transform: translateY(-50%) rotate(-90deg);
}

/* Hover: leichtes Wippen */
.value:hover .value-flower.left{  transform: translateY(calc(-50% - 4px)) rotate(-12deg); transition: transform .35s ease; }
.value:hover .value-flower.right{ transform: translateY(calc(-50% - 4px)) rotate(12deg);  transition: transform .35s ease; }

/* Responsive */
@media (max-width: 900px){
    .values-grid{ grid-template-columns: 1fr; gap: 18px; }
    .value-body{ padding: 18px 22px 18px 90px; }
    .value:nth-child(2) .value-body,
    .value:nth-child(4) .value-body{ padding: 18px 90px 18px 22px; }
}
@media (max-width: 520px){
    .value-body{ padding: 18px 18px 18px 88px; }
    .value:nth-child(2) .value-body,
    .value:nth-child(4) .value-body{ padding: 18px 88px 18px 18px; }
    .value-flower{ width: 72px; }
}

/* ===== Safer Use Section ===== */
.saferuse { position: relative; }

.safer-grid{
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(0, 820px) 1fr; /* Blume – Card – Blume */
    grid-template-areas:
    "flowerL card flowerR"
    ".       cta  .";
    align-items: center;
    gap: 24px;
}

/* Blumen links/rechts – Stiel nach außen */
.su-flower{
    grid-row: 1;
    width: clamp(90px, 14vw, 160px);
    height: auto;
    opacity: .9;
    pointer-events: none;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.18));
}
.su-flower.left  { grid-area: flowerL; justify-self: start; transform: rotate(0deg); }
.su-flower.right { grid-area: flowerR; justify-self: end;   transform: scaleX(-1); } /* spiegeln */

/* Content-Karte */
.su-card{
    grid-area: card;
    background: var(--seg-ink-plug);            /* heller Peach-Ton */
    color: #3b302d;                             /* dunkler Text auf hell */
    border-radius: 22px;
    padding: clamp(16px, 3vw, 28px) clamp(18px, 3.4vw, 32px);
    box-shadow: 0 14px 26px rgba(0,0,0,.18);
}

/* kleine Überschrift oben */
.su-eyebrow{
    margin: 0 0 8px;
    text-align: center;
    color: #ea6e66;               /* Akzent wie im Mockup */
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 900;
    font-size: clamp(14px, 1.6vw, 18px);
}

/* Kartentitel */
.su-title{
    margin: 6px 0 12px;
    font-weight: 900;
    text-transform: none;
    font-size: clamp(18px, 2.2vw, 22px);
    color: #3b302d;
}

/* Fließtext */
.su-card p{
    margin: 0;
    line-height: 1.65;
    font-size: clamp(15px, 1.8vw, 16px);
    color: #3b302d;
    opacity: .95;
}

/* CTA unter der Karte */
.su-cta-wrap{
    grid-area: cta;
    display: flex;
    justify-content: center;
    margin-top: 8px;
}
.su-cta{
    background: #ff7f73; /* dein CTA-Farbton */
    border-radius: 999px;
    padding: 16px 22px;
    text-align: center;
    text-decoration: none;
    font-weight: 900;
}

/* Hover-Interaktion der Blumen (dezent) */
.su-flower:hover{ transform: translateY(-6px) rotate(-2deg); opacity: .95; }
.su-flower.right:hover{ transform: translateY(-6px) scaleX(-1) rotate(2deg); }

/* ===== Responsive ===== */
@media (max-width: 980px){
    .safer-grid{
        grid-template-columns: 1fr;
        grid-template-areas:
      "card"
      "cta";
        gap: 16px;
    }
    .su-flower{ display: none; }     /* Blumen auf Mobile aus, wenn’s zu eng wird */
    .su-cta{ width: min(92vw, 480px); }
}

.fixed-cta{
    position: fixed;
    left: -15px;       /* Abstand vom linken Rand */
    top: 15%;         /* vertikale Position (Mitte des Screens ~60%) */
    transform: translateY(-50%);
    z-index: 2000;    /* über allem anderen */
    display: block;
}

.fixed-cta img{
    width: 240px;     /* Breite anpassen */
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.3)); /* schöner Schatten */
    transition: transform .3s ease;
}

.fixed-cta:hover img{
    transform: scale(1.05);
}

/* ========= ÜBER UNS ========= */
.team-section{ position:relative; overflow:hidden; }

/* Deko-Blumen außen */
.team-flower.big{
    position:absolute; width:clamp(90px, 15vw, 200px); opacity:.25; pointer-events:none; z-index:0;
}
.team-flower.big.left{  left:-14px; }
.team-flower.big.right{ right:-14px; transform:scaleX(-1); }
.team-flower.big.top{ top: 32px; }
.team-flower.big.bottom{ bottom: 32px; }

/* Header */
.team-header{ text-align:center; margin-bottom:12px; }
.team-header h2{
    margin:0 0 6px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
}

.team-header p{
    text-align: center;
}

.team-kicker{ margin:0; opacity:.85; color:var(--seg-ink-about); }

/* Hero-Bild */
.team-hero{ margin:18px auto 8px; max-width:900px; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); position:relative; z-index:1; }
.team-hero img{ display:block; width:100%; height:auto; }

/* Mission */
.team-mission{
    text-align:center; max-width:820px; margin:12px auto 26px; line-height:1.6; color:var(--seg-ink-about); opacity:.95;
}

/* Kartenliste */
/* Team Cards (About Us) – spacing & avatar size */
.team-list {
    display: flex;
    flex-direction: column;
    gap: 50px;   /* vorher z.B. 22px → jetzt größerer Abstand */
    align-items: center;
}

.member-card {
    display: grid;
    grid-template-columns: 120px 1fr;  /* mehr Platz für größere Avatare */
    align-items: center;
    gap: 80px; /* Abstand zwischen Avatar und Textbox */

}

.avatar {
    width: 180px;   /* vorher 96px → jetzt größer */
    height: 180px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: var(--shadow);
    border: 4px solid rgba(0,0,0,.12);
}
.card{
    position:relative; background: var(--seg-ink-about); /* heller peach */
    color:#3b302d; border-radius:18px; padding:16px 18px 16px 18px; box-shadow:0 10px 24px rgba(0,0,0,.18);
    width: 500px;
}
.card h3{ margin:0 0 2px; font-size:18px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; text-align: left; margin-left: 3px;}
.card .role{ margin:0 0 6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:100; color: #fa6b69; text-align: left; margin-left: 3px;}
.card .meta{ margin:0; line-height:1.5; }
.card p.meta {color: rgba(0, 0, 0, 0.18); text-align: left;
    .card p{color: #111111}
}
.member-card h3.meta {color: #f2665c;}

/* kleine Blume auf Karte */
.card-flower{
    position:absolute; right:16px; top:-18px; width:64px; height:auto; opacity:.95; pointer-events:none; filter:drop-shadow(0 6px 12px rgba(0,0,0,.18));
}

/* Hover-Effekt dezent */
.member-card:hover .card-flower{ transform: translateY(-4px) rotate(6deg); transition:transform .25s ease; }
.member-card:hover .card{ transform: translateY(-2px); transition: transform .2s ease; }

/* Responsive */
@media (max-width: 860px){
    .team-hero{ max-width:100%; }
}
@media (max-width: 680px){
    .member-card{ grid-template-columns:72px 1fr; }
    .avatar{ width:72px; height:72px; }
    .card-flower{ width:52px; right:12px; top:-14px; }
}
@media (max-width: 480px){
    .team-flower.big{ display:none; } /* außenstehende Blumen auf sehr klein ausblenden */
}

/* ---------- TEAM: Mobile-Optimierung ---------- */
@media (max-width: 720px){

    /* Abstand & Breite der Section auf Mobile */
    #team .section{
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Liste etwas enger */
    .team-list{
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;                 /* enger zusammen */
    }

    /* Karte kompakter darstellen */
    .member-card{
        position: relative;
        min-height: 96px;
        width: calc(100% - 0px);   /* Standard */
    }

    /* Avatar bleibt sichtbar und „dockt“ links an die Box an */
    .member-card .avatar{
        position: absolute;
        left: 8px;
        top: -18px;                /* leicht über die Box ragen */
        width: 84px;
        height: 84px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 6px 18px rgba(0,0,0,.25);
        z-index: 1;
    }

    /* Box kleiner und mit Platz für den Avatar */
    .member-card .card{
        padding: 14px 14px 14px 108px; /* Platz für Avatar */
        border-radius: 18px;
        box-shadow: 0 10px 22px rgba(0,0,0,.18);
    }

    /* Typo etwas reduziert, damit alles reinpasst */
    .member-card .card h3{ font-size: 18px; margin: 2px 0 4px; }
    .member-card .role{ font-size: 11px; letter-spacing: .12em; }
    .member-card .meta{ font-size: 14px; line-height: 1.45; }

    /* Deko-Blümchen in der Karte kleiner oder ausblenden, damit nichts überlappt */
    .member-card .card-flower{
        width: 58px;
        opacity: .9;
        right: -6px;
        top: -10px;
    }
}

/* Noch etwas kompakter für sehr kleine Screens */
@media (max-width: 380px){
    .member-card .avatar{ width: 74px; height: 74px; top: -14px; }
    .member-card .card{ padding-left: 96px; }
    .member-card .card h3{ font-size: 17px; }
    .member-card .meta{ font-size: 13.5px; }
}


.site-footer{
    background: var(--seg-hero);
    color: var(--seg-ink-hero);
    font-size: 16px;
}
.footer-inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 16px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 28px;
    align-items: start;
}

.footer-col h4{
    font-weight: 900;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin-bottom: 6px; }
.footer-col a{ color: var(--seg-ink-hero); text-decoration:none; }
.footer-col a:hover{ text-decoration: underline; }

/* Brand + Social nebeneinander */
.brand-row{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap: 28px;
}
.footer-logo{
    width: clamp(140px, 18vw, 220px);
    height:auto;
}
.footer-social{
    display:flex;
    align-items:center;
    gap: 16px;
}
.footer-social .social-label{
    font-weight: 900;
    text-transform: uppercase;
    font-size: 14px;
}
.footer-social .icons{
    display:flex;
    gap: 8px;
}
.footer-social .icons img{
    width: 100px;
    height:auto;
    display:block;
    transition: transform .2s ease;
}
.footer-social .icons a:hover img{ transform: translateY(-3px); }

/* Footer bottom */
.footer-bottom{
    text-align:center;
    padding: 12px 16px;
    font-size: 14px;
    border-top: 1px solid rgba(255,255,255,.15);
    opacity:.9;
}

/* Responsive */
@media (max-width: 900px){
    .footer-inner{ grid-template-columns: 1fr 1fr; }
    .brand-row{ flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:12px; }
}
@media (max-width: 600px){
    .footer-inner{ grid-template-columns: 1fr; }
    .brand-row{ flex-direction:column; align-items:center; text-align:center; }
}


/*IMPRESSUM*/
/* --- Impressum: kleinere Abstände zwischen den legal-block Sections --- */
/* --- Impressum: Abstände zwischen den Blocks enger --- */
/* ===== Impressum: Section-Padding neutralisieren & Abstände eng ===== */

/* 1) Globales section-Padding auf Impressum-Seite ausschalten */
body.legal section {
    padding: 0 !important;          /* hebt section{padding:80px 16px} auf */
    text-align: left !important;    /* falls zentriert geerbt wird */
}

/* 2) Speziell: die legal-blocks eng setzen (innen & außen) */
body.legal .legal-content > .legal-block {
    margin: 20px 0;                  /* externer Abstand pro Block */
    padding: 0;                     /* kein interner Extra-Padding */
}

/* 3) Typo in legal-blocks etwas verdichten */
body.legal .legal-content > .legal-block h2 {
    margin: 0 0 6px;

}
body.legal .legal-content > .legal-block h3 {
    margin: 70px 0 6px;
}
body.legal .legal-content > .legal-block p {
    margin: 3px 0;
    line-height: 1.55;
}

/* Impressum: Blumen <img> am Seitenrand */
body.legal .corner-flower{
    position: absolute;
    top: 80px;
    bottom: 0;
    width: min(42vw, 320px);
    height: auto;
    opacity: 100;
    pointer-events: none;
    z-index: 0;
    object-fit: contain;
}
body.legal .corner-flower.left{  left: -18px;  transform: scaleX(-1); }
body.legal .corner-flower.right{ right: -18px; }
body.legal .legal-content{ position: relative; z-index: 1; }


/* Footer nur auf Impressum-Seite */
body.legal .site-footer {
    background: #925656;    /* deine Wunschfarbe */
    color: #fff;            /* Textfarbe im Footer */
}

body.legal .site-footer a {
    color: #ffd6b6;         /* Links im Footer */
}

/* ABOUT: Textblock wirklich rechts im 2-Spalten-Grid platzieren */
#about .about-grid{
    display: grid;                /* bleibt Grid */
    grid-template-columns: 1.1fr 1fr;
}

#about .about-content{
    grid-column: 2;               /* rechte Spalte */
    justify-self: end;            /* innerhalb der Spalte ganz nach rechts */
    max-width: 640px;             /* angenehme Zeilenlänge */
    width: 100%;
    /*text-align: left;            /* Text rechtsbündig */
    margin: 0;
    /*align-items: flex-end;/* Auto-Margins hier nicht nötig */
}



/* Mobile / Tablet: untereinander */
@media (max-width: 900px){
    #about {
        position: relative;
    }

    .about-grid {
        display: block;       /* kein Grid mehr */
        text-align: center;
    }

    .about-content {
        text-align: left;     /* auf Mobil besser lesbar */
        margin: 0 auto;
        max-width: 720px;
    }

    .about-corner {
        position: static;     /* Bild nicht mehr absolute fixieren */
        margin: 24px auto 0;  /* Abstand oben + mittig zentriert */
        text-align: center;
    }

    .about-corner img {
        max-width: 80%;       /* Bild kleiner auf Mobile */
        height: auto;
    }
}

/* ===== Timeline: links ausgerichtet, Platz rechts für Blume ===== */
.timeline .section{
    position: relative;
    max-width: 1200px;
    /* linksbündig: mehr Luft rechts */
    margin-left: clamp(16px, 4vw, 56px);
    margin-right: auto;
}

.timeline .tl-wrapper{
    position: relative;
    /* rechts Platz für die Blume reservieren */
    padding-right: min(30vw, 360px);
}

/* Rechte Deko-Blume */
.timeline .tl-flower{
    position: absolute;
    right: -10px;
    top: 0;
    bottom: -24px;               /* darf etwas überragen */
    width: min(32vw, 360px);
    height: auto;
    object-fit: contain;
    opacity: .9;
    pointer-events: none;
    z-index: 0;                  /* IMMER hinter der Timeline */
}

/* ===== Vertikale Achse + Marken ===== */
.timeline .tl-axis{
    position: relative;
    z-index: 1;                  /* vor der Blume */
    /* Linke Spaltenbreite – hier spielt die Musik */
    max-width: min(700px, 62vw);
    /* sorgt dafür, dass alles links bleibt */
    margin-right: auto;
    padding: 8px 0 24px;
}

/* Linie in der Mitte der linken Spalte */
.timeline .tl-axis::before{
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 6px;
    background: #ff7f73;
    border-radius: 999px;
}

/* Ein einzelner Eintrag */
.timeline .tl-mark{
    position: relative;
    margin: 38px 0 46px;
}

/* Textblöcke – links/rechts der Achse */
.timeline .tl-mark .tl-text{
    max-width: 320px;
}

.timeline .tl-mark.left .tl-text{
    text-align: right;
    margin-right: calc(50% + 64px);   /* links von der Achse */
}

.timeline .tl-mark.right .tl-text{
    text-align: left;
    margin-left:  calc(50% + 64px);   /* rechts von der Achse */
}

/* Querstrich + Punkt an der Achse */
.timeline .tl-mark > span{
    position: absolute;
    top: 0.95em;                      /* an Überschrift orientieren */
    height: 4px;
    background: #ff7f73;
    border-radius: 3px;
    width: 48px;
}
.timeline .tl-mark.left  > span{ right: calc(50% + 6px); }   /* von Achse nach links */
.timeline .tl-mark.right > span{ left:  calc(50% + 6px); }   /* von Achse nach rechts */

.timeline .tl-mark > span::after{
    content:"";
    position:absolute; top:50%;
    transform: translateY(-50%);
    width: 12px; height: 12px;
    background:#ff6f67;
    border: 3px solid #ffa39c;
    border-radius: 50%;
}
.timeline .tl-mark.left  > span::after{ left: -10px; } /* Punkt außen am Strichende */
.timeline .tl-mark.right > span::after{ right: -10px; }

/* ===== Typo für Timeline (überschreibt evtl. globale section p) ===== */
.timeline .tl-text h3{
    margin: 0 0 6px;
    font: 900 16px/1.35 var(--font, inherit);
    text-transform: uppercase;
    color: #ffd6b6;
}
.timeline .tl-text p{
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--seg-ink-about);
}

/* ========== MOBILE FIX FÜR TIMELINE (<= 900px) – harte Overrides ========== */
@media (max-width: 900px) {

    /* Platz & Blume */
    .timeline .tl-wrapper { padding-right: 0; }
    .timeline .tl-flower  { display: none; }

    /* Achse links */
    .timeline .tl-axis{ max-width:100%; margin:0 auto; padding:0; }
    .timeline .tl-axis::before{ left:20px; width:4px; }

    .timeline .tl-mark{ margin:28px 0 40px; }

    /* --- WICHTIG: Desktop-Positionen überschreiben --- */
    /* Querstrich immer von der Achse nach rechts */
    .timeline .tl-mark.left  > span,
    .timeline .tl-mark.right > span{
        left: 20px !important;
        right: auto !important;
        width: 32px;
    }
    /* Punkt immer am rechten Strichende */
    .timeline .tl-mark.left  > span::after,
    .timeline .tl-mark.right > span::after{
        left: auto !important;
        right: -10px !important;
    }

    /* Text immer rechts neben der Achse, keine alten Margins */
    .timeline .tl-mark.left .tl-text,
    .timeline .tl-mark.right .tl-text{
        margin: 0 !important;
        padding-left: 70px;
        max-width: 100%;
        text-align: left;
    }

    /* etwas feinere Typo */
    .timeline .tl-text h3{ font-size:15px; line-height:1.35; }
    .timeline .tl-text p { font-size:14.5px; line-height:1.65; }
}




/* etwas mehr Luft zwischen sehr langen Einträgen auf kleinen Screens */
@media (max-width: 560px){
    .timeline .tl-mark{ margin: 32px 0 42px; }
}



/* Responsive: untereinander */
@media (max-width: 900px) {
    .t



        /* ============ GRÜNDUNGSSTORY ============ */
    .founding { position: relative; overflow: hidden; }

    .founding-title{
        margin: 0 0 24px;
        text-transform: uppercase;
        letter-spacing: .16em;
        font-weight: 900;
        text-align: center;
    }

    /* Grid oben: Bild + Text */
    .founding-grid{
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: clamp(18px, 4vw, 36px);
        align-items: start;
        margin-bottom: 32px;
    }

    /*.founding-media img{
        display: block;
        width: 100px;
        height: auto;
        border-radius: 16px;
        box-shadow: 0 14px 26px rgba(0,0,0,.18);
    }*/

    .founding-content p{
        margin: 0 0 14px;
        line-height: 1.65;
        color: var(--seg-ink-about);
        opacity: .95;
    }

    /* Unterer Block (zentriert, volle Breite) */
    .founding-extra{
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
    }
    .founding-extra p{
        margin: 0 0 16px;
        line-height: 1.65;
        color: var(--seg-ink-about);
        opacity: .95;
    }
    .founding-extra .btn{
        margin-top: 18px;
    }

    /* Deko-Blumen */
    .founding-flower{
        position: absolute;
        width: clamp(120px, 22vw, 280px);
        opacity: .9;
        pointer-events: none;
        z-index: 0;
    }
    .founding-flower.left.top    { left: -12px;  top:  12px;  transform: scaleX(-1); }
    .founding-flower.right.top   { right:-12px;  top:  12px; }
    .founding-flower.left.bottom { left: -12px;  bottom: -12px;  transform: scaleX(-1); }
    .founding-flower.right.bottom{ right:-12px;  bottom: -12px; }

    /* Responsive */
    @media (max-width: 900px){
        .founding-grid{
            grid-template-columns: 1fr;
        }
        .founding-media{ order: 1; }
        .founding-content{ order: 2; }
    }
    @media (max-width: 560px){
        .founding-flower{ display: none; }
    }

    /* ===== Wer wir sind (Text-Section) ===== */
    .who-we-are { position: relative; }

    .who-title{
        text-transform: uppercase;
        letter-spacing: .18em;
        font-weight: 900;
        text-align: center;
    }

    .who-copy{
        max-width: 900px;            /* angenehme Zeilenlänge */
        margin: 0 auto;
        text-align: center;
    }

    .who-copy p{
        margin: 0 0 16px;
        line-height: 1.7;
        color: var(--seg-ink-plug);  /* heller Text auf seg-plug Hintergrund */
        opacity: .95;
    }

    .who-copy .accent{
        color: #ff7f73;              /* korallfarbener Akzent */
        font-weight: 800;
    }

    .who-cta-note{
        margin-top: 10px;
        opacity: .95;
    }

    .who-link{
        color: #ffd6b6;
        text-underline-offset: 2px;
        font-weight: 800;
    }
    .who-link:hover{ text-decoration: underline; }

    /* Responsive */
    @media (max-width: 700px){
        .who-copy{ padding: 0 8px; }
    }


    /* ===== Safe Space Section ===== */
    .safe-space{
        position: relative;
        overflow: hidden;
        /* nutzt seg-about-Hintergrund/Schrift aus deinem Theme */
    }

    .safe-space .section{
        max-width: 1100px;            /* etwas breiter, wirkt „bannerartig“ */
        margin: 0 auto;
        text-align: center;
    }

    .safe-space .eyebrow{
        margin: 0 0 6px;
        text-transform: uppercase;
        letter-spacing: .18em;
        font-weight: 900;
        color: #ffd6b6;
        opacity: .9;
    }

    .safe-title{
        margin: 0 0 16px;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-weight: 900;
        color: #ffd6b6;
        font-size: clamp(22px, 3.4vw, 36px);
    }

    .safe-lead{
        max-width: 900px;
        margin: 0 auto 16px;
        line-height: 1.7;
        color: var(--seg-ink-about);
        opacity: .95;
    }

    .safe-strong{
        max-width: 900px;
        margin: 10px auto 0;
        font-weight: 800;
        color: var(--seg-ink-about);
        line-height: 1.7;
    }

    /* Deko-Blumen seitlich */
    .safe-flower{
        position: absolute;
        top: 10%;
        width: clamp(120px, 18vw, 260px);
        opacity: .55;
        pointer-events: none;
    }
    .safe-flower.left{
        left: -6px;
        transform: scaleX(-1);
    }
    .safe-flower.right{
        right: -6px;
    }

    /* Responsive Feinschliff */
    @media (max-width: 820px){
        .safe-flower{ display: none; }
        .safe-space .section{ padding: 0 10px; }
    }

    #cannanas {
        max-width: 900px;
        width: 100%;
        margin: 40px auto;   /* 40px Abstand oben/unten, auto seitlich */
        padding: 20px;
        margin-left: 50px;
    }

    /* Mobile Layout */
    @media (max-width: 900px) {
        #about .about-grid {
            display: block;                /* untereinander statt nebeneinander */
            text-align: center;
            padding: 20px 16px;
        }

        #about .about-content {
            max-width: 100%;
            text-align: right;            /* Text mittig */
            margin-bottom: 28px;           /* Abstand zum Bild */
        }

        #about .about-content .btn {
            margin-top: 22px;              /* Luft zwischen Text und Button */
        }

        #about .about-corner {
            margin-top: 20px;              /* Abstand oberhalb vom Bild */
        }

        #about .about-photo {
            max-width: 320px;
            margin: 1px auto;             /* gleichmäßiger Abstand oben/unten */
        }
    }

    /* ====== GRÜNDUNGSSTORY: Bild links klein, Text rechts ====== */
    #gruendung .section{
        max-width: 1100px;
        margin: 0 auto;
        padding-inline: clamp(16px, 4vw, 32px);
    }

    .founding-grid{
        display: grid;
        grid-template-columns: clamp(260px, 30vw, 360px) 1fr; /* Bildspalte ~260–360px */
        gap: clamp(20px, 4vw, 40px);
        align-items: start;
    }

    .founding-media{
        justify-self: start;           /* Bild links ausrichten */
    }


    .founding-content p{
        margin: 0 0 14px;
        line-height: 1.7;              /* gut lesbar, kein Überlappen */
        color: var(--seg-ink-about);
    }

    /* Blumen wirklich hinter den Inhalt */
    #gruendung .founding-flower{
        position: absolute;
        inset: auto;
        z-index: 0;
        opacity: .18;
        pointer-events: none;
    }
    #gruendung .section{ position: relative; z-index: 1; }

    /* ====== Responsive: auf kleinen Screens Bild oben mittig ====== */
    @media (max-width: 900px){
        .founding-grid{
            grid-template-columns: 1fr;
        }
        .founding-media{
            justify-self: center;
            max-width: 420px;            /* Bild bleibt kleiner */
            margin-bottom: 10px;
        }
        .founding-content{
            text-align: left;            /* oder center, wenn du willst */
        }
    }