/* ============================================================ Explority · Design-System Farben aus app_colors.dart (brandNavy / brandYellow), Schriften aus pubspec.yaml (Secular One, Caveat). Motiv: Reisetagebuch — gestrichelte Routen, Ticket-Kanten, handschriftliche Randnotizen, warmes Papier. ============================================================ */ /* ---------- Tokens ---------- */ :root{ /* Marke */ --navy:#2D3E54; --navy-soft:#3C5170; --navy-deep:#1B2736; --gold:#E5A82E; --gold-dk:#B26A00; --gold-soft:#F7E3B4; /* Flächen */ --surface:#FFFFFF; --surface-2:#F7F9FE; --paper:#FBF8F2; --border:#DCE3F0; --border-strong:#C3CFE4; /* Text */ --ink:#16202E; --muted:#5A6B80; --on-dark:#EEF2F9; --on-dark-muted:#A9B8CD; /* Signal */ --ok:#2E7D4F; --warn:#B26A00; /* Maße */ --wrap:1180px; --wrap-narrow:760px; --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px; /* Schrift */ --f-display:"Secular One","Trebuchet MS",system-ui,sans-serif; --f-body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif; --f-hand:"Caveat","Segoe Script",cursive; /* Schatten */ --sh-sm:0 1px 2px rgba(22,32,46,.06), 0 2px 8px rgba(22,32,46,.05); --sh:0 2px 4px rgba(22,32,46,.05), 0 12px 28px rgba(22,32,46,.09); --sh-lg:0 4px 8px rgba(22,32,46,.06), 0 28px 60px rgba(22,32,46,.16); --sh-gold:0 10px 30px rgba(229,168,46,.28); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--surface); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{max-width:100%;display:block} a{color:inherit} button{font:inherit;color:inherit} h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.12;letter-spacing:-.015em;margin:0} p{margin:0 0 1em} p:last-child{margin-bottom:0} :focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px} /* ---------- Layout ---------- */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)} .wrap-narrow{max-width:var(--wrap-narrow)} .section{padding-block:clamp(64px,9vw,116px);position:relative} .section--paper{background:var(--paper)} .section--tint{background:var(--surface-2)} .section--navy{background:var(--navy);color:var(--on-dark)} .section--navy h1,.section--navy h2,.section--navy h3{color:#fff} .section--navy p{color:var(--on-dark-muted)} /* Papierkorn — legt sich als feine Textur über dunkle Flächen */ .section--navy::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:1; background-image:url("/assets/img/noise.png");background-size:96px 96px; } .section--navy>*{position:relative;z-index:1} /* ---------- Typo-Skala ---------- */ .eyebrow{ font-family:var(--f-body);font-weight:800;font-size:.72rem; letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dk); display:flex;align-items:center;gap:10px;margin:0 0 18px; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px;flex:none} .section--navy .eyebrow{color:var(--gold)} .h-xl{font-size:clamp(2.4rem,6.2vw,4.4rem)} .h-lg{font-size:clamp(2rem,4.4vw,3.1rem)} .h-md{font-size:clamp(1.45rem,2.6vw,2rem)} .h-sm{font-size:clamp(1.12rem,1.7vw,1.32rem)} .lead{font-size:clamp(1.06rem,1.6vw,1.24rem);color:var(--muted);line-height:1.7;max-width:62ch} .section--navy .lead{color:var(--on-dark-muted)} /* Handschriftliche Randnotiz */ .hand{ font-family:var(--f-hand);font-size:1.6rem;line-height:1.25; color:var(--gold-dk);transform:rotate(-2.2deg);display:inline-block; } .section--navy .hand{color:var(--gold)} /* Gold-Unterstreichung wie mit dem Marker gezogen */ .mark{ background:linear-gradient(transparent 76%,var(--gold-soft) 76%,var(--gold-soft) 95%,transparent 95%); padding-inline:.06em; } .section--navy .mark{background:linear-gradient(transparent 76%,rgba(229,168,46,.42) 76%,rgba(229,168,46,.42) 95%,transparent 95%)} /* ---------- Buttons ---------- */ .btn{ --btn-bg:var(--navy);--btn-fg:#fff;--btn-bd:var(--navy); display:inline-flex;align-items:center;justify-content:center;gap:.6em; padding:.86em 1.5em;border-radius:999px;border:2px solid var(--btn-bd); background:var(--btn-bg);color:var(--btn-fg); font-family:var(--f-body);font-weight:800;font-size:.97rem;letter-spacing:.005em; text-decoration:none;cursor:pointer; transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,background .18s,color .18s; } .btn:hover{transform:translateY(-2px);box-shadow:var(--sh)} .btn:active{transform:translateY(0)} .btn--gold{--btn-bg:var(--gold);--btn-fg:var(--navy-deep);--btn-bd:var(--gold)} .btn--gold:hover{box-shadow:var(--sh-gold)} .btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy);--btn-bd:var(--border-strong)} .btn--ghost:hover{--btn-bd:var(--navy)} .section--navy .btn--ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.34)} .section--navy .btn--ghost:hover{--btn-bd:#fff} .btn--lg{padding:1.02em 1.9em;font-size:1.02rem} .btn svg{width:1.15em;height:1.15em;flex:none} .btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} /* ---------- Store-Badges ---------- */ .stores{display:flex;flex-wrap:wrap;gap:12px} .store{ display:inline-flex;align-items:center;gap:12px; padding:10px 20px 10px 16px;border-radius:14px; background:var(--navy-deep);color:#fff;text-decoration:none; border:1px solid rgba(255,255,255,.14); transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s; } .store:hover{transform:translateY(-2px);box-shadow:var(--sh)} .store svg{width:26px;height:26px;flex:none;fill:currentColor} .store span{display:block;line-height:1.15} .store .store-sm{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;opacity:.72} .store .store-lg{font-size:1.02rem;font-weight:800} .stores--light .store{background:#fff;color:var(--navy-deep);border-color:var(--border)} /* ---------- Kopfzeile ---------- */ .site-header{ position:sticky;top:0;z-index:60; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .25s,box-shadow .25s; } .site-header.is-stuck{border-bottom-color:var(--border);box-shadow:0 6px 24px rgba(22,32,46,.06)} .nav{display:flex;align-items:center;gap:22px;min-height:74px} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;margin-right:auto} .brand img{height:38px;width:auto} .brand-name{font-family:var(--f-display);font-size:1.32rem;color:var(--navy);letter-spacing:-.02em} .nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0} .nav-links a{ display:block;padding:.55em .9em;border-radius:999px;text-decoration:none; font-weight:700;font-size:.94rem;color:var(--navy); transition:background .18s,color .18s; } .nav-links a:hover{background:var(--surface-2)} .nav-links a[aria-current="page"]{color:var(--gold-dk);background:rgba(229,168,46,.12)} .nav-cta{flex:none} /* Der Kontakt-Knopf steckt zweimal in der Navigation: einmal fuer breite Fenster (.nav-cta), einmal im ausklappbaren Menue (.m-cta). Auf dem Desktop bleibt der zweite verborgen. */ .nav-links .m-cta{display:none} @media (max-width:1060px){.nav-links .m-cta{display:block}} .nav-toggle{ display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:12px; background:#fff;cursor:pointer;align-items:center;justify-content:center;flex:none; } .nav-toggle span{display:block;width:19px;height:2px;background:var(--navy);border-radius:2px;position:relative;transition:background .2s} .nav-toggle span::before,.nav-toggle span::after{ content:"";position:absolute;left:0;width:19px;height:2px;background:var(--navy);border-radius:2px; transition:transform .24s cubic-bezier(.2,.8,.3,1); } .nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px} .nav-toggle[aria-expanded="true"] span{background:transparent} .nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)} @media (max-width:1060px){ .nav-toggle{display:flex} .nav-cta{display:none} .nav-links{ position:absolute;left:0;right:0;top:100%; flex-direction:column;align-items:stretch;gap:2px; background:#fff;border-bottom:1px solid var(--border); padding:12px clamp(20px,5vw,40px) 22px; box-shadow:0 18px 40px rgba(22,32,46,.12); clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none; transition:clip-path .3s cubic-bezier(.2,.8,.3,1),opacity .2s; } .nav-links.is-open{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto} .nav-links a{padding:.78em .9em;font-size:1.04rem} .nav-links .m-cta{margin-top:10px} .nav-links .m-cta .btn{width:100%} } /* ---------- Hero ---------- */ .hero{ position:relative;background:var(--navy-deep);color:var(--on-dark); padding-block:clamp(66px,10vw,116px) clamp(74px,10vw,124px); overflow:hidden; } .hero::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:1; background-image:url("/assets/img/noise.png");background-size:96px 96px; } /* Höhenlinien-Karte im Hintergrund */ .hero-map{position:absolute;inset:0;pointer-events:none;opacity:.16;z-index:0;width:100%;height:100%} .hero-map path{fill:none;stroke:var(--gold);stroke-width:1.1} .hero-glow{ position:absolute;z-index:0;pointer-events:none; width:min(680px,80vw);aspect-ratio:1;border-radius:50%; right:-14%;top:-24%; background:radial-gradient(circle,rgba(229,168,46,.26),transparent 66%); filter:blur(14px); } .hero .wrap{position:relative;z-index:2} .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,68px);align-items:center} @media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:44px}} .hero h1{color:#fff;font-size:clamp(2.5rem,6.6vw,4.3rem)} .hero h1 em{font-style:normal;color:var(--gold);display:inline-block} .hero .lead{margin-top:22px;color:#C6D2E2;font-size:clamp(1.08rem,1.7vw,1.26rem)} .hero-actions{margin-top:34px} .hero-note{margin-top:26px;display:flex;align-items:center;gap:10px;color:var(--on-dark-muted);font-size:.9rem;font-weight:600} .hero-note svg{width:17px;height:17px;color:var(--gold);flex:none} /* Kennzahlen-Leiste */ .hero-stats{ margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px; border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.09); } @media (max-width:620px){.hero-stats{grid-template-columns:repeat(2,1fr)}} .hero-stats div{background:rgba(255,255,255,.045);padding:16px 18px} .hero-stats dt{font-family:var(--f-display);font-size:1.42rem;color:var(--gold);line-height:1.1} .hero-stats dd{margin:5px 0 0;font-size:.8rem;color:var(--on-dark-muted);line-height:1.35} /* ---------- Telefon-Rahmen ---------- */ /* Das Seitenverhaeltnis sitzt an der Bildflaeche, nicht am Rahmen. Am Rahmen gerechnet zoege die Polsterung von beiden Seiten ab, die Flaeche waere schmaler als das Bild — und object-fit:cover schnitte rund drei Prozent der Breite weg. So passt der Screenshot exakt. 1179x2556 ist die Aufloesung der Vorlagen (iPhone). */ .phone{ position:relative;width:100%;max-width:290px;margin-inline:auto; border-radius:44px; background:#0E1520;padding:9px; box-shadow:0 3px 0 rgba(255,255,255,.09) inset,var(--sh-lg); } .phone::after{ /* Dynamic Island */ content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%); width:78px;height:22px;border-radius:999px;background:#0E1520;z-index:3; } .phone-screen{ width:100%;aspect-ratio:1179/2556;border-radius:36px;overflow:hidden; background:#EEF2F9;position:relative; } .phone-screen img{width:100%;height:100%;object-fit:cover;object-position:top center} .phone-fallback{ position:absolute;inset:0;display:grid;place-content:center;gap:8px;justify-items:center; padding:24px;text-align:center;color:var(--muted);font-size:.82rem; background:var(--surface-2); } .phone-fallback svg{width:34px;height:34px;color:var(--border-strong)} .phone-stack{position:relative;display:grid;place-items:center;min-height:520px} .phone-stack .phone{max-width:262px} .phone-stack .phone--back{ position:absolute;transform:rotate(-8deg) translate(-32%,4%) scale(.9); opacity:.82;filter:saturate(.9);z-index:1; } .phone-stack .phone--front{position:relative;z-index:2} .phone-stack .phone--side{ position:absolute;transform:rotate(8deg) translate(32%,4%) scale(.9); opacity:.82;filter:saturate(.9);z-index:1; } @media (max-width:560px){ .phone-stack .phone--back,.phone-stack .phone--side{display:none} .phone-stack{min-height:auto} } /* ---------- Screenshot-Streifen ---------- Waechst mit: egal ob fuenf oder zwoelf Ansichten, der Streifen laeuft seitwaerts weiter und rastet beim Wischen sauber ein. Ein Raster muesste man bei jeder neuen Ansicht neu austarieren, damit die letzte Zeile nicht halb leer bleibt. */ .shot-strip{ display:grid;grid-auto-flow:column;grid-auto-columns:minmax(216px,1fr); gap:clamp(18px,2.5vw,28px); overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding-bottom:20px;margin-bottom:-20px; scrollbar-width:thin; } .shot-strip>figure{margin:0;scroll-snap-align:center} .shot-strip .phone{max-width:100%} .shot-cap{margin-top:16px;text-align:center} .shot-cap strong{display:block;font-family:var(--f-display);font-weight:400; font-size:1.04rem;color:var(--navy);line-height:1.25} .shot-cap span{display:block;margin-top:5px;color:var(--muted);font-size:.88rem;line-height:1.45} .section--navy .shot-cap strong{color:#fff} .section--navy .shot-cap span{color:var(--on-dark-muted)} /* Hinweis zum Wischen — nur dort, wo tatsaechlich Zeigegeraete fehlen */ .shot-hint{margin-top:20px;text-align:center;color:var(--muted);font-size:.86rem} /* ---------- Durchgang: Text neben Telefon, abwechselnd ---------- */ .walk{display:grid;gap:clamp(48px,7vw,90px)} .walk-row{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:clamp(28px,5vw,64px);align-items:center; } /* Jede zweite Zeile spiegeln, damit der Blick beim Lesen wandert */ .walk-row:nth-child(even) .walk-shot{order:-1} .walk-num{ display:inline-grid;place-content:center;width:40px;height:40px; border-radius:12px;background:var(--gold);color:var(--navy-deep); font-family:var(--f-display);font-size:1.2rem;margin-bottom:16px; } .walk-row h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:12px} .walk-row p{color:var(--muted)} .walk-shot{display:flex;justify-content:center} .walk-shot .phone{max-width:290px;margin:0} @media (max-width:820px){ .walk-row{grid-template-columns:1fr} /* Auf schmalen Schirmen steht der Text immer zuerst */ .walk-row:nth-child(even) .walk-shot{order:0} } /* ---------- Routen-Motiv ---------- */ /* Gestrichelte Linie, die Abschnitte wie Etappen verbindet */ .route{position:relative;padding-left:52px} .route::before{ content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px; background-image:linear-gradient(var(--border-strong) 62%,transparent 0); background-size:2px 11px; } .route-step{position:relative;padding-bottom:38px} .route-step:last-child{padding-bottom:0} .route-step::before{ content:"";position:absolute;left:-45px;top:3px;width:22px;height:22px; border-radius:50%;background:var(--gold);border:4px solid var(--surface); box-shadow:0 0 0 2px var(--gold); } .section--paper .route-step::before{border-color:var(--paper)} .section--tint .route-step::before{border-color:var(--surface-2)} .route-step h3{font-size:1.16rem;margin-bottom:6px} .route-step p{color:var(--muted);margin:0} /* ---------- Karten ---------- */ .grid{display:grid;gap:22px} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:940px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:780px){.grid-2{grid-template-columns:1fr}} @media (max-width:620px){.grid-3,.grid-4{grid-template-columns:1fr}} /* Zwei Spalten mit Seitenleiste — Inhalt breit, Leiste schmal */ .grid-side{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(32px,5vw,64px);align-items:start} .grid-side--flip{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)} @media (max-width:900px){.grid-side,.grid-side--flip{grid-template-columns:1fr}} /* ---------- Portrait ---------- */ .portrait{margin:0;display:inline-block;position:relative} .portrait img{ width:min(320px,72vw);aspect-ratio:1;object-fit:cover; border-radius:var(--r-xl);border:5px solid rgba(255,255,255,.1); box-shadow:var(--sh-lg); } .portrait figcaption{ position:absolute;left:50%;bottom:-22px;transform:translateX(-50%); background:var(--gold);color:var(--navy-deep); padding:9px 20px;border-radius:999px;box-shadow:var(--sh); text-align:center;white-space:nowrap; } .portrait figcaption strong{display:block;font-family:var(--f-display);font-size:1.02rem;line-height:1.2} .portrait figcaption span{display:block;font-size:.76rem;font-weight:700;opacity:.75} .portrait.is-missing img{display:none} .portrait.is-missing::before{ content:"JS";display:grid;place-content:center; width:min(320px,72vw);aspect-ratio:1;border-radius:var(--r-xl); background:var(--navy-soft);color:var(--gold); font-family:var(--f-display);font-size:3.6rem; border:5px solid rgba(255,255,255,.1); } /* ---------- Steckbrief-Liste ---------- */ .specs{display:grid;grid-template-columns:max-content 1fr;gap:14px 22px;margin:20px 0 0} .specs dt{color:var(--muted);font-size:.82rem;font-weight:800; letter-spacing:.05em;text-transform:uppercase;line-height:1.4} .specs dd{margin:0;font-size:.97rem;line-height:1.55} .specs a{color:var(--gold-dk);font-weight:700} @media (max-width:560px){ .specs{grid-template-columns:1fr;gap:2px 0} .specs dd{margin-bottom:14px} .specs dd:last-child{margin-bottom:0} } .card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); padding:28px;position:relative; transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,border-color .22s; } .card--hover:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--border-strong)} .card h3{font-size:1.2rem;margin-bottom:9px} .card p{color:var(--muted);font-size:.97rem;margin:0} .card-icon{ width:46px;height:46px;border-radius:13px;display:grid;place-items:center; background:rgba(229,168,46,.15);color:var(--gold-dk);margin-bottom:18px; } .card-icon svg{width:23px;height:23px} .section--navy .card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13)} .section--navy .card h3{color:#fff} .section--navy .card p{color:var(--on-dark-muted)} .section--navy .card-icon{background:rgba(229,168,46,.2);color:var(--gold)} /* Karte mit Gold-Kante links — für Hervorhebungen */ .card--accent{border-left:4px solid var(--gold)} /* ---------- Ticket-Karten (Preise / Rollen) ---------- */ .ticket{ position:relative;background:var(--surface);border:1px solid var(--border); border-radius:var(--r-lg);padding:30px 28px;display:flex;flex-direction:column; transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s; } .ticket:hover{transform:translateY(-4px);box-shadow:var(--sh)} /* Perforation wie am Bordkarten-Abriss */ .ticket::before,.ticket::after{ content:"";position:absolute;width:20px;height:20px;border-radius:50%; background:var(--surface-2);border:1px solid var(--border); } .ticket::before{left:-11px;top:118px} .ticket::after{right:-11px;top:118px} .section--paper .ticket::before,.section--paper .ticket::after{background:var(--paper)} .ticket--featured{border:2px solid var(--gold);box-shadow:var(--sh)} .ticket-flag{ position:absolute;top:-13px;left:50%;transform:translateX(-50%); background:var(--gold);color:var(--navy-deep);font-weight:800;font-size:.72rem; letter-spacing:.11em;text-transform:uppercase;padding:5px 14px;border-radius:999px; white-space:nowrap; } .ticket-name{font-family:var(--f-display);font-size:1.3rem;color:var(--navy)} .ticket-price{display:flex;align-items:baseline;gap:7px;margin:14px 0 2px;flex-wrap:wrap} .ticket-price b{font-family:var(--f-display);font-size:2.5rem;font-weight:400;line-height:1;color:var(--ink)} .ticket-price span{color:var(--muted);font-size:.9rem;font-weight:700} .ticket-sub{color:var(--muted);font-size:.85rem;min-height:2.6em; padding-bottom:22px;margin-bottom:22px; border-bottom:2px dashed var(--border-strong);} .ticket ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px;flex:1} .ticket li{display:flex;gap:10px;font-size:.93rem;line-height:1.5;color:var(--ink)} .ticket li svg{width:17px;height:17px;color:var(--ok);flex:none;margin-top:.25em} .ticket .btn{width:100%} /* ---------- Tabelle ---------- */ .table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)} table.matrix{width:100%;border-collapse:collapse;font-size:.92rem;min-width:680px} table.matrix th,table.matrix td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--border)} table.matrix thead th{ background:var(--navy);color:#fff;font-family:var(--f-display);font-weight:400; font-size:.95rem; } table.matrix tbody th{font-weight:700;color:var(--ink)} table.matrix td{text-align:center;color:var(--muted)} table.matrix tbody tr:last-child th,table.matrix tbody tr:last-child td{border-bottom:0} table.matrix tbody tr:nth-child(even){background:var(--surface-2)} .yes{color:var(--ok);font-weight:800} .no{color:var(--border-strong);font-weight:800} /* ---------- Akkordeon (FAQ) ---------- */ .faq-group{margin-bottom:44px} .faq-group>h2{margin-bottom:20px} details.qa{ border:1px solid var(--border);border-radius:var(--r);background:var(--surface); margin-bottom:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s; } details.qa[open]{border-color:var(--border-strong);box-shadow:var(--sh-sm)} details.qa summary{ cursor:pointer;list-style:none;padding:19px 56px 19px 22px;position:relative; font-weight:800;font-size:1.02rem;color:var(--navy); } details.qa summary::-webkit-details-marker{display:none} details.qa summary::after{ content:"";position:absolute;right:22px;top:50%;width:11px;height:11px; border-right:2.5px solid var(--gold-dk);border-bottom:2.5px solid var(--gold-dk); transform:translateY(-70%) rotate(45deg);transition:transform .24s cubic-bezier(.2,.8,.3,1); } details.qa[open] summary::after{transform:translateY(-20%) rotate(-135deg)} details.qa summary:hover{background:var(--surface-2)} .qa-body{padding:0 22px 21px;color:var(--muted);font-size:.98rem} .qa-body p:last-child{margin-bottom:0} /* ---------- Formular ---------- */ .form{display:grid;gap:18px} .field{display:grid;gap:7px} .field label{font-weight:800;font-size:.9rem;color:var(--navy)} .field .req{color:var(--gold-dk)} .field input,.field select,.field textarea{ font:inherit;font-size:1rem;color:var(--ink); padding:.82em 1em;border:1.5px solid var(--border);border-radius:12px; background:var(--surface);width:100%; transition:border-color .18s,box-shadow .18s; } .field textarea{min-height:150px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(229,168,46,.16); } .field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media (max-width:620px){.field-row{grid-template-columns:1fr}} .field-hint{font-size:.82rem;color:var(--muted)} .check{display:flex;gap:12px;align-items:flex-start;font-size:.93rem;line-height:1.55;color:var(--muted)} .check input{width:20px;height:20px;flex:none;margin-top:.15em;accent-color:var(--gold-dk)} .check a{color:var(--navy);font-weight:700} /* Honigtopf — für Menschen unsichtbar, Bots füllen ihn aus */ .hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden} .form-status{ padding:15px 18px;border-radius:12px;font-size:.95rem;font-weight:700;display:none; border:1.5px solid transparent; } .form-status.is-ok{display:block;background:rgba(46,125,79,.1);border-color:rgba(46,125,79,.3);color:var(--ok)} .form-status.is-err{display:block;background:rgba(178,106,0,.1);border-color:rgba(178,106,0,.32);color:var(--warn)} .form-status.is-busy{display:block;background:var(--surface-2);border-color:var(--border);color:var(--muted)} /* ---------- Fußzeile ---------- */ .site-footer{background:var(--navy-deep);color:var(--on-dark-muted);padding-block:64px 34px;position:relative;overflow:hidden} .site-footer::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:1; background-image:url("/assets/img/noise.png");background-size:96px 96px; } .site-footer .wrap{position:relative;z-index:1} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:38px} @media (max-width:880px){.footer-grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.footer-grid{grid-template-columns:1fr}} .footer-grid h4{font-family:var(--f-body);font-weight:800;font-size:.76rem; letter-spacing:.15em;text-transform:uppercase;margin:0 0 16px;color:var(--gold)} .footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .footer-grid a{color:var(--on-dark-muted);text-decoration:none;font-size:.94rem;transition:color .18s} .footer-grid a:hover{color:#fff} .footer-brand p{font-size:.92rem;max-width:34ch;color:var(--on-dark-muted)} .footer-lockup{display:inline-flex;align-items:center;gap:13px;text-decoration:none;margin-bottom:18px} .footer-lockup img{height:46px;width:auto} .footer-lockup strong{display:block;font-family:var(--f-display);font-weight:400; font-size:1.6rem;color:#fff;line-height:1.05;letter-spacing:-.02em} .footer-lockup em{display:block;font-style:normal;font-size:.7rem;font-weight:800; letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:3px} .footer-bottom{ margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12); display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center; font-size:.86rem; } /* ---------- Rechtsdokumente ---------- */ /* .xpl-doc bringt eigene Styles aus WordPress mit — hier nur die Umgebung */ .legal-head{background:var(--navy);color:#fff;padding-block:clamp(48px,7vw,84px);position:relative;overflow:hidden} .legal-head h1{color:#fff;font-size:clamp(2rem,4.6vw,3rem)} .legal-head p{color:var(--on-dark-muted);margin-top:12px} .legal-body{padding-block:clamp(40px,6vw,68px)} /* Nutzungsbedingungen und Datenschutz bringen ihr eigenes Layout mit: ab 1000 px Fensterbreite ein festes Inhaltsverzeichnis von 230 px links, daneben der Text. Dafuer braucht der Rahmen mehr Platz als die uebrigen Textseiten — sonst bleibt fuer den Text zu wenig uebrig. Darunter faellt das Dokument auf eine Spalte zurueck; dann begrenzen wir die Zeilenlaenge, damit der Text lesbar bleibt. */ .wrap-legal{max-width:1320px} /* Das Dokument verlangt in seinem eigenen