/* agrosz.de — gemeinsames Stylesheet. Erzeugt aus dem abgenommenen Entwurf 3. Aenderungen hier wirken auf alle Seiten. Schriften: Schibsted Grotesk (Display) + Geist (Text) + JetBrains Mono (Zahlen), alle lokal, siehe fonts.css. Die CSP der Site laesst nichts Externes zu. */ :root{ /* Eigene Palette: tiefes Navy mit Grünstich, Petrolblau, warme Terrakotta. Bewusst nicht die Tailwind-Standardskala. */ --navy:#102434; --navy-2:#1B3B54; --blue:#12617F; --blue-2:#1A82A8; --blue-soft:#E6F1F5; --terra:#C0532B; --terra-2:#DC6E3F; --terra-soft:#FBEDE6; --paper:#FCFBF9; --band:#F3F1EC; --line:#E3DFD7; --line-2:#EFECE5; --ink:#141E28; --ink-2:#4F5C68; --ink-3:#6B7681; --ease:cubic-bezier(.2,.8,.25,1); --sh:0 1px 2px rgba(16,36,52,.05), 0 8px 24px -12px rgba(16,36,52,.16); --sh-h:0 2px 4px rgba(16,36,52,.06), 0 18px 40px -18px rgba(16,36,52,.28); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink); font-family:'Geist',system-ui,sans-serif;font-size:16.5px;line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:'Schibsted Grotesk',system-ui,sans-serif; letter-spacing:-.022em;margin:0;line-height:1.1} .wrap{width:min(1200px,100%);margin:0 auto;padding:0 clamp(1.15rem,4vw,3.25rem)} .mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-feature-settings:"tnum"} /* Einblenden beim Scrollen. Der Startzustand gilt NUR, wenn JavaScript laeuft: site.js setzt .js auf . Sonst waere die Seite ohne JavaScript leer. */ .js .rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} *{transition-duration:.01ms!important;animation-duration:.01ms!important} } /* Knöpfe */ .btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.4rem; border-radius:5px;font-weight:600;font-size:.94rem;line-height:1; transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s} .btn-p{background:var(--terra);color:#fff;box-shadow:0 1px 2px rgba(192,83,43,.3),0 10px 22px -12px rgba(192,83,43,.7)} .btn-p:hover{background:#A8451F;transform:translateY(-1px); box-shadow:0 2px 4px rgba(192,83,43,.3),0 16px 30px -14px rgba(192,83,43,.8)} .btn-s{border:1px solid var(--line);background:#fff;color:var(--ink)} .btn-s:hover{border-color:var(--blue);color:var(--blue)} .btn-g{border:1px solid rgba(255,255,255,.28);color:#fff} .btn-g:hover{background:rgba(255,255,255,.1)} .pfeil{transition:transform .3s var(--ease)} a:hover .pfeil{transform:translateX(3px)} /* Kopfleiste */ /* line-height kommt sonst mit 1.65 aus dem Fliesstext. Bei 12,5px sind das ueber 20px je Zeile — bricht der Satz auf dem Telefon um, sieht der Abstand wie eine Leerzeile aus. Und die feste Hoehe von 36px passte nur, solange alles in eine Zeile ging. */ .balken{background:var(--navy);color:#C6D5E0;font-size:12.5px;line-height:1.35} .balken .wrap{display:flex;flex-wrap:wrap;gap:.1rem 1.2rem;align-items:center; min-height:36px;padding:.35rem 0} .balken a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)} .balken .r{margin-left:auto;color:#8FA6B7} @media(max-width:700px){.balken .r{display:none}} header{position:sticky;top:0;z-index:30;background:rgba(252,251,249,.9); backdrop-filter:blur(12px) saturate(160%);border-bottom:1px solid var(--line)} header .wrap{display:flex;align-items:center;gap:2rem;height:72px} /* Ohne eigene Zeilenhoehe steht zwischen "Aleksander" und "Grosz" der Fliesstext-Abstand von 1.65 — im schmalen Fuss bricht der Name um und der Abstand faellt auf. */ .logo{font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:1.08rem; letter-spacing:-.03em;display:flex;align-items:center;gap:.6rem; line-height:1.15} .logo .pkt{width:7px;height:7px;background:var(--terra);border-radius:1px; display:inline-block;transform:translateY(-1px)} header nav{margin-left:auto;display:flex;gap:1.9rem;align-items:center} header nav a{font-size:14.5px;font-weight:500;color:var(--ink-2);position:relative;padding:.4rem 0} header nav a::after{content:"";position:absolute;left:0;right:100%;bottom:.1rem;height:2px; background:var(--terra);transition:right .35s var(--ease);border-radius:2px} header nav a:hover{color:var(--ink)}header nav a:hover::after{right:0} @media(max-width:960px){header nav{display:none}} /* Kopfbereich */ .hero{padding:clamp(3rem,6vw,5.5rem) 0 clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden} .hero::before{content:"";position:absolute;top:-30%;right:-12%;width:60vw;height:60vw; background:radial-gradient(circle at 50% 50%,var(--blue-soft) 0%,rgba(230,241,245,0) 62%); pointer-events:none} .hero .wrap{position:relative} .hero-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} @media(max-width:980px){.hero-grid{grid-template-columns:1fr}} .marke{display:inline-flex;align-items:center;gap:.6rem;font-size:13px;font-weight:500; color:var(--blue);background:var(--blue-soft);padding:.42rem .85rem;border-radius:99px; margin-bottom:1.7rem} .marke i{width:6px;height:6px;background:var(--blue);border-radius:50%;font-style:normal} .hero h1{font-size:clamp(1.95rem,4.1vw,3.05rem);font-weight:700;max-width:24ch; text-wrap:balance} .hero h1 em{font-style:normal;color:var(--blue); background:linear-gradient(180deg,transparent 66%,rgba(26,130,168,.18) 66%)} .hero .sub{margin:1.5rem 0 2.2rem;font-size:clamp(1.02rem,1.35vw,1.16rem); color:var(--ink-2);max-width:52ch;line-height:1.68} .hero .ctas{display:flex;gap:.85rem;flex-wrap:wrap} .hero .unten{margin-top:2rem;font-size:13.5px;color:var(--ink-3);line-height:1.5} .pf{position:relative} .pf .bild{position:relative;border-radius:6px;overflow:hidden;box-shadow:var(--sh)} .pf .bild img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 50%} .pf .karte{position:absolute;left:-1.1rem;bottom:-1.1rem;background:#fff;border:1px solid var(--line); border-radius:6px;padding:.85rem 1.1rem;box-shadow:var(--sh);max-width:15rem} .pf .karte .n{font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:1.5rem; color:var(--navy);letter-spacing:-.03em} .pf .karte .l{font-size:12px;color:var(--ink-3);margin-top:.15rem;line-height:1.4} @media(max-width:980px){.pf{max-width:340px}} /* Kennzahlenstreifen */ .zahlen{background:var(--navy);color:#fff} /* gap war 1px. Bei vier breiten Spalten faellt das nicht auf, in zwei Spalten auf dem Telefon schon: die Beschriftungen sind 32 bis 37 Zeichen lang, brechen bei rund 169px Spaltenbreite um, und der Text der Nachbarspalte beginnt einen Pixel daneben. .zk hat ausserdem nur senkrechte Innenabstaende. */ .zahlen .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem} .zk{padding:1.7rem 0} @media(max-width:760px){ .zahlen .wrap{grid-template-columns:repeat(2,1fr);gap:.5rem 1.8rem} .zk{padding:1.35rem 0} } /* Unter 400px reicht auch fuer zwei Spalten der Platz nicht mehr. */ @media(max-width:400px){ .zahlen .wrap{grid-template-columns:1fr;gap:0} .zk{padding:1.1rem 0} .zk+.zk{border-top:1px solid rgba(255,255,255,.09)} } .zk .n{font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem); letter-spacing:-.035em;line-height:1} .zk .n span{color:var(--terra-2)} .zk .l{font-size:12.5px;color:#93A7B8;margin-top:.45rem;line-height:1.4} /* Abschnitte */ section{padding:clamp(3.5rem,7.5vw,6.5rem) 0} .band{background:var(--band)} .dunkel{background:var(--navy);color:#fff} .eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--terra);margin-bottom:1rem;display:block} .dunkel .eyebrow{color:var(--terra-2)} h2.gross{font-size:clamp(1.75rem,3.6vw,2.6rem);font-weight:700;max-width:22ch} .sub2{margin:1.1rem 0 0;color:var(--ink-2);max-width:56ch;font-size:1.02rem} .dunkel .sub2{color:#9FB3C4} .kopfzeile{margin-bottom:clamp(2.2rem,4vw,3.2rem)} .kopfzeile.split{display:flex;align-items:flex-end;gap:2rem;flex-wrap:wrap} .kopfzeile.split .mehr{margin-left:auto;font-weight:600;color:var(--blue);font-size:.95rem; display:inline-flex;gap:.4rem;align-items:center} /* Dieselbe Sache wie im Fuss: bricht der Kopf um, schiebt margin-left:auto den Link ganz nach rechts, waehrend Augenbraue und Ueberschrift links stehen. */ @media(max-width:640px){ .kopfzeile.split{gap:1rem} .kopfzeile.split .mehr{margin-left:0} } /* Praxiskarten */ .praxiskarten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)} @media(max-width:900px){.praxiskarten{grid-template-columns:1fr}} .pxk{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1.6rem 1.5rem 1.7rem; transition:box-shadow .35s var(--ease),transform .35s var(--ease),border-color .35s} .pxk:hover{box-shadow:var(--sh-h);transform:translateY(-2px);border-color:#D6D1C7} .pxk .zit{font-family:'Schibsted Grotesk',sans-serif;font-weight:600;font-size:1.1rem; line-height:1.32;color:var(--navy)} .pxk .zit::before{content:"„";color:var(--terra);font-size:1.5em;line-height:0; vertical-align:-.1em;margin-right:.05em} .pxk p{margin:.9rem 0 0;font-size:.94rem;color:var(--ink-2)} .pxk .wer{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line-2); font-size:12px;color:var(--ink-3);line-height:1.45} /* Felder */ .felder{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)} @media(max-width:900px){.felder{grid-template-columns:1fr}} .fk{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden; display:flex;flex-direction:column;transition:box-shadow .35s var(--ease),transform .35s var(--ease)} .fk:hover{box-shadow:var(--sh-h);transform:translateY(-3px)} .fk .oben{height:4px;background:linear-gradient(90deg,var(--blue),var(--blue-2))} .fk:nth-child(2) .oben{background:linear-gradient(90deg,var(--navy-2),var(--blue))} .fk:nth-child(3) .oben{background:linear-gradient(90deg,var(--terra),var(--terra-2))} .fk .in{padding:1.6rem 1.5rem 1.7rem;display:flex;flex-direction:column;flex:1} .fk h3{font-size:1.16rem;font-weight:700;margin-bottom:.35rem} .fk .seit{font-size:12px;color:var(--ink-3);margin-bottom:.9rem} .fk p{margin:0;font-size:.94rem;color:var(--ink-2)} .fk ul{margin:1.1rem 0 0;padding:0;list-style:none} .fk li{font-size:.89rem;color:var(--ink-2);padding:.45rem 0 .45rem 1.35rem;position:relative} .fk li::before{content:"";position:absolute;left:0;top:1.16em;width:6px;height:1.5px; background:var(--blue);border-radius:2px} .fk .link{margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line-2); font-weight:600;font-size:.92rem;color:var(--blue);display:inline-flex; gap:.4rem;align-items:center} /* Fälle */ .faelle{display:grid;gap:clamp(1rem,2vw,1.5rem)} .fall{background:#fff;border:1px solid var(--line);border-radius:6px; display:grid;grid-template-columns:230px 1fr;overflow:hidden; transition:box-shadow .35s var(--ease)} .fall:hover{box-shadow:var(--sh-h)} @media(max-width:820px){.fall{grid-template-columns:1fr}} .fall .kpi{background:var(--navy);color:#fff;padding:1.8rem 1.6rem;display:flex; flex-direction:column;justify-content:center} .fall .kpi .n{font-family:'Schibsted Grotesk',sans-serif;font-weight:800; font-size:clamp(2.1rem,3.8vw,2.9rem);letter-spacing:-.04em;line-height:1; color:var(--terra-2)} .fall .kpi .l{font-size:12.5px;color:#9FB3C4;margin-top:.5rem;line-height:1.4} .fall .txt{padding:1.7rem 1.7rem 1.8rem} .fall .meta{font-size:12px;color:var(--ink-3);margin-bottom:.5rem} .fall h3{font-size:1.14rem;font-weight:700;margin-bottom:.9rem} .fall dl{margin:0;display:grid;gap:.7rem} .fall dt{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-3)} .fall dd{margin:.15rem 0 0;font-size:.94rem;color:var(--ink-2);line-height:1.62} /* Fachartikel */ .artikel{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)} @media(max-width:900px){.artikel{grid-template-columns:1fr}} .ak{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden; transition:box-shadow .35s var(--ease),transform .35s var(--ease)} .ak:hover{box-shadow:var(--sh-h);transform:translateY(-3px)} .ak .bild{background:var(--band);border-bottom:1px solid var(--line)} .ak .bild img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 30%} .ak .in{padding:1.3rem 1.4rem 1.5rem} .ak .k{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase; color:var(--blue)} .ak h3{font-size:1.06rem;font-weight:700;margin:.6rem 0 .5rem;line-height:1.28} .ak p{margin:0;font-size:.9rem;color:var(--ink-2)} .ak .datum{margin-top:1rem;font-size:12px;color:var(--ink-3)} /* Newsletter */ .nl{background:linear-gradient(135deg,var(--navy) 0%,#17384F 100%);color:#fff; border-radius:8px;padding:clamp(2rem,4vw,3rem);display:grid; grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3rem);align-items:center; position:relative;overflow:hidden} @media(max-width:860px){.nl{grid-template-columns:1fr}} /* Warmer Schimmer rechts, damit der dunkle Kasten nicht flach wirkt. Er ist fuer die zweispaltige Fassung gerechnet, wo rechts freie Flaeche liegt. Sobald der Inhalt stapelt, liegt er ueber dem Text statt daneben, und bei 44 % eines nur noch 338px breiten Kastens wird aus dem Schimmer ein brauner Schleier. Unterhalb des Umbruchs deshalb weg — den Verlauf im Hintergrund behaelt der Kasten ohnehin. */ .nl::after{content:"";position:absolute;right:-8%;top:-40%;width:44%;height:180%; background:radial-gradient(circle,rgba(220,110,63,.22) 0%,rgba(220,110,63,0) 65%)} @media(max-width:860px){.nl::after{display:none}} .nl>*{position:relative;z-index:1} .nl h2{font-size:clamp(1.5rem,2.8vw,2.05rem);font-weight:700;max-width:18ch} .nl p{margin:.9rem 0 0;color:#A8BCCC;max-width:44ch;font-size:.98rem} .nlform{display:flex;flex-direction:column;gap:.7rem} .nlform input{padding:.9rem 1rem;border-radius:5px;border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:.95rem} .nlform input::placeholder{color:#7E93A5} .nlform input:focus{outline:none;border-color:var(--terra-2);background:rgba(255,255,255,.11)} .nlform .hin{font-size:11.5px;color:#7E93A5;line-height:1.5} /* Über mich */ .ueber{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center} @media(max-width:900px){.ueber{grid-template-columns:1fr}} .ueber .bild{border-radius:6px;overflow:hidden;box-shadow:var(--sh)} .ueber p{color:var(--ink-2);margin:1.2rem 0 0} .ueber .liste{margin:1.6rem 0 0;padding:0;list-style:none;display:grid;gap:.55rem} .ueber .liste li{font-size:.94rem;color:var(--ink-2);padding-left:1.5rem;position:relative} .ueber .liste li::before{content:"";position:absolute;left:0;top:.57em;width:8px;height:8px; border-radius:2px;background:var(--terra);opacity:.85} /* Abschluss */ .abschluss{text-align:center} .abschluss h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:700;margin:0 auto;max-width:20ch} .abschluss p{color:#9FB3C4;margin:1.2rem auto 2rem;max-width:48ch} .abschluss .ctas{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap} footer{background:var(--navy);color:#8FA6B7;padding:3rem 0 2.2rem;font-size:14px; border-top:1px solid rgba(255,255,255,.09)} footer .sp{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem; padding-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.09)} @media(max-width:820px){footer .sp{grid-template-columns:1fr 1fr}} footer a{display:block;padding:.28rem 0;color:#8FA6B7} footer a:hover{color:#fff} footer .unten{padding-top:1.4rem;display:flex;gap:1.4rem;flex-wrap:wrap;font-size:12.5px} footer .unten .r{margin-left:auto} /* Auf dem Telefon passen die drei Teile ohnehin nicht nebeneinander: allein Zeile und Anschrift brauchen rund 357px. Der Link rutschte dann in eine eigene Zeile und blieb wegen margin-left:auto rechtsbuendig stehen, waehrend darueber alles links stand. Jetzt stehen alle drei linksbuendig, mit engerem Zeilenabstand, und der Link bekommt Luft plus Unterstrich — ohne Hover ist das der einzige Hinweis, dass er antippbar ist. */ @media(max-width:640px){ footer .unten{gap:.3rem 1.4rem} footer .unten .r{margin-left:0;margin-top:.55rem;align-self:flex-start; border-bottom:1px solid rgba(255,255,255,.25)} } /* ── Logo: das vorhandene AG-Monogramm, freigestellt ── */ .logo img{height:34px;width:auto;object-fit:contain} .logo .pkt{display:none} footer .logo img{height:30px} /* ── Mobiles Menü ── */ .menue-knopf{display:none;margin-left:auto;background:none;border:0;cursor:pointer; padding:.6rem;gap:5px;flex-direction:column;width:42px} .menue-knopf span{display:block;height:2px;background:var(--ink);border-radius:2px; transition:transform .3s var(--ease),opacity .3s var(--ease)} .menue-knopf[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menue-knopf[aria-expanded="true"] span:nth-child(2){opacity:0} .menue-knopf[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .menue-mobil{display:none;flex-direction:column;background:#fff; border-bottom:1px solid var(--line);position:sticky;top:72px;z-index:29} .menue-mobil.offen{display:flex} .menue-mobil a{padding:.95rem clamp(1.15rem,4vw,3.25rem);border-top:1px solid var(--line-2); font-weight:500;font-size:.98rem} .menue-mobil a:hover{background:var(--band);color:var(--blue)} @media(max-width:960px){.menue-knopf{display:flex}} /* ── Bausteine für die Unterseiten ── */ .seitenkopf{padding:clamp(2.5rem,5vw,4rem) 0 clamp(1.5rem,3vw,2.5rem); border-bottom:1px solid var(--line);background:var(--band)} .brotkrume{font-size:13px;color:var(--ink-3);margin-bottom:1rem} .brotkrume a:hover{color:var(--blue)} .seitenkopf h1{font-size:clamp(1.95rem,4.4vw,3.05rem);font-weight:700;max-width:20ch} .seitenkopf .sub{margin:1.2rem 0 0;font-size:clamp(1rem,1.3vw,1.12rem);color:var(--ink-2); max-width:56ch;line-height:1.68} .fliess{max-width:44rem} .fliess h2{font-size:clamp(1.4rem,2.6vw,1.85rem);font-weight:700;margin:2.6rem 0 .9rem} .fliess h2:first-child{margin-top:0} .fliess h3{font-size:1.14rem;font-weight:700;margin:1.9rem 0 .5rem} .fliess p{margin:0 0 1.1rem;color:var(--ink-2)} .fliess ul{margin:0 0 1.4rem;padding:0;list-style:none} .fliess li{padding:.45rem 0 .45rem 1.5rem;position:relative;color:var(--ink-2)} .fliess li::before{content:"";position:absolute;left:0;top:1.20em;width:7px;height:2px; background:var(--blue);border-radius:2px} .zweispalt{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(2rem,5vw,4rem); align-items:start} @media(max-width:900px){.zweispalt{grid-template-columns:1fr}} .merk{background:var(--band);border:1px solid var(--line);border-radius:6px; padding:1.4rem 1.5rem;position:sticky;top:96px} .merk ul{margin:0;padding:0;list-style:none} .merk li{font-size:.92rem;color:var(--ink-2);padding:.5rem 0;border-top:1px solid var(--line-2)} .merk li:first-child{border-top:0} /* ── Formular ────────────────────────────────────────────────────────────── Die Klassen hidden/flex/border-red-400/bg-red-50/animate-spin werden von booking.js gesetzt. booking.js und die Netlify-Function bleiben unverändert, deshalb sind die Namen hier nachgebildet statt dort umbenannt. */ .formular{display:grid;gap:1.1rem} /* Raster- und Flex-Elemente haben von Haus aus min-width:auto: sie schrumpfen nicht unter die Mindestbreite ihres Inhalts. Bei Formularen ist das ein Problem, weil zwei Elemente eine eigene, zaehe Mindestbreite mitbringen:
(implizites min-inline-size:min-content, ignoriert width) und (Breite der Datumsauswahl, auf iOS deutlich). Zwingen sie die Spalte breiter als den Schirm, schneidet body{overflow-x:hidden} rechts ab, statt scrollen zu lassen — das Formular sieht dann abgeschnitten aus. */ .formular>*,.feldpaar>*,.zweispalt>*{min-width:0} fieldset{min-width:0} .feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} @media(max-width:620px){.feldpaar{grid-template-columns:1fr}} .feld{display:grid;gap:.4rem} .feld>span{font-size:13px;font-weight:600;color:var(--ink-2)} .feld>span i{font-style:normal;font-weight:400;color:var(--ink-3)} .feld input,.feld select,.feld textarea{ font:inherit;font-size:.96rem;padding:.78rem .9rem;border:1px solid var(--line); border-radius:5px;background:#fff;color:var(--ink);width:100%; min-width:0;max-width:100%; transition:border-color .25s var(--ease),box-shadow .25s var(--ease)} /* iOS gibt Datums- und Zeitfeldern eine eigene Mindestbreite und ignoriert width. Ohne die eigene Darstellung sprengen sie die Spalte. Aussehen bleibt gleich, Rahmen, Polster und Hintergrund kommen ohnehin von hier. */ .feld input[type="date"],.feld input[type="time"]{ -webkit-appearance:none;appearance:none} .feld textarea{resize:vertical;min-height:7rem} .feld input:focus,.feld select:focus,.feld textarea:focus{ outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)} fieldset.feld{border:0;padding:0;margin:0} .formate{display:grid;gap:.5rem} .formate label{display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem; color:var(--ink-2);cursor:pointer} .formate>legend+label{margin-top:.1rem} @media(min-width:560px){.formate{grid-template-columns:repeat(3,auto); justify-content:start;gap:1.4rem}.formate>legend{grid-column:1/-1}} .hinweis-klein{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.55} .hinweis-klein a{color:var(--blue);text-decoration:underline} .erfolg{border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:6px; padding:1.6rem 1.7rem;background:var(--band)} .erfolg h2{font-size:1.2rem;font-weight:700;margin-bottom:.6rem} .erfolg p{margin:0 0 .5rem;color:var(--ink-2)} #bookingSendErr{display:flex;gap:.6rem;align-items:flex-start;padding:.8rem 1rem; border-radius:5px;background:#FDECEA;border:1px solid #F3C9C4;color:#8C2F22; font-size:.9rem;margin-bottom:.4rem} #bookingSendErr i{display:none} /* Die Mailadresse in der Fehlermeldung trug noch Tailwind-Klassen aus der alten Site und erschien deshalb unformatiert. */ .fehler-mail{font-weight:700;text-decoration:underline;text-underline-offset:2px; color:inherit} .fehler-mail:hover{color:#6E2419} .booking-err{margin:.25rem 0 0;font-size:12px;color:#A63A2A;font-weight:500} /* Der Hinweis unter einem falsch ausgefuellten Feld hatte keine eigene Farbe und erschien in normaler Textfarbe — also kaum als Fehler erkennbar. */ /* von booking.js gesetzte Zustände */ .hidden{display:none!important} .flex{display:flex} .flex-col{flex-direction:column} .relative{position:relative} .text-red-500{color:#C0392B} .border-red-400{border-color:#E08276!important} .bg-red-50{background:#FDF2F0!important} .animate-spin{animation:kreisel .9s linear infinite} @keyframes kreisel{to{transform:rotate(360deg)}} /* ── Rechtstexte: der Inhalt bleibt unangetastet, nur die Einkleidung ist neu ── */ .rechtstext{max-width:48rem} .rechtstext h2,.rechtstext h3{font-family:'Schibsted Grotesk',sans-serif;font-weight:700; letter-spacing:-.02em;margin:2.2rem 0 .8rem} .rechtstext h2{font-size:1.42rem} .rechtstext h3{font-size:1.08rem} .rechtstext p,.rechtstext li{color:var(--ink-2);font-size:.97rem} .rechtstext p{margin:0 0 1rem} .rechtstext ul,.rechtstext ol{margin:0 0 1.2rem;padding-left:1.3rem} .rechtstext li{padding:.2rem 0} .rechtstext li::before{content:none} .rechtstext a{color:var(--blue);text-decoration:underline} .rechtstext table{width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:.92rem} .rechtstext th,.rechtstext td{text-align:left;padding:.6rem .8rem .6rem 0; border-bottom:1px solid var(--line-2);vertical-align:top} .rechtstext strong,.rechtstext b{color:var(--ink)} /* ── Klappmenü in der Kopfleiste: hält die Navigation einzeilig ── */ .klapp{position:relative} .klapp>a{display:inline-flex;align-items:center;gap:.35rem} .klapp>a::before{content:"";position:absolute;left:0;right:0;top:100%;height:.9rem} .klapp .pfeil-ab{width:9px;height:9px;border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px); transition:transform .3s var(--ease);opacity:.6} .klapp.offen .pfeil-ab{transform:rotate(225deg) translateY(-3px)} .klapp-inhalt{position:absolute;top:calc(100% + .85rem);left:-1rem;min-width:19rem; background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:var(--sh-h); padding:.5rem;opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s} .klapp.offen .klapp-inhalt{ opacity:1;visibility:visible;transform:none} .klapp-inhalt a{display:block;padding:.65rem .85rem;border-radius:4px;font-size:14px; color:var(--ink);font-weight:500} .klapp-inhalt a::after{content:none} .klapp-inhalt a span{display:block;font-size:12.5px;color:var(--ink-3);font-weight:400; margin-top:.12rem;line-height:1.4} .klapp-inhalt a:hover{background:var(--band);color:var(--blue)} header nav{gap:1.6rem} header nav a{white-space:nowrap} @media(max-width:1080px){header nav{gap:1.15rem}header nav a{font-size:13.5px}} /* ── Bildband unter dem Seitenkopf ───────────────────────────────────────── */ .bildband{position:relative;overflow:hidden;background:var(--navy)} .bildband img{width:100%;height:clamp(200px,26vw,340px);object-fit:cover;display:block} /* Eigenes Foto mit Person: Streifen knapp hoeher als sonst (Bild 3,33:1), bis ~1300px Breite wird nichts beschnitten, darueber bleibt der Kopf im Bild. */ .bildband-ueber-mich img{height:clamp(200px,30vw,400px);object-position:50% 35%} .bildband .nachweis{position:absolute;right:.7rem;bottom:.55rem;font-size:10.5px; color:rgba(255,255,255,.72);background:rgba(16,36,52,.42);padding:.2rem .5rem; border-radius:3px;backdrop-filter:blur(3px)} .bildband .nachweis a{text-decoration:underline} /* ── Zeitleiste der Stationen ──────────────────────────────────────────── Löst die vierspaltige Tabelle ab: die war breit, auf schmalen Bildschirmen fiel eine Spalte weg, und beim Überfliegen verrutschten die Zeilen. */ .zeitleiste{position:relative;margin:0} .station{position:relative;display:grid;grid-template-columns:7.5rem 1fr; gap:0 1.6rem;padding:1.15rem 1.1rem 1.25rem 0; border-top:1px solid var(--line);transition:background .25s var(--ease)} .station:last-child{border-bottom:1px solid var(--line)} .station:nth-child(odd){background:rgba(18,97,127,.028)} .station:hover{background:var(--blue-soft)} .station .zeit{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px; color:var(--blue);letter-spacing:.02em;padding-top:.28rem; position:relative;padding-left:1.35rem;white-space:nowrap} .station .zeit::before{content:"";position:absolute;left:.3rem;top:.91em; width:7px;height:7px;border-radius:50%;background:var(--blue); box-shadow:0 0 0 3px var(--paper)} .station .zeit::after{content:"";position:absolute;left:.6rem;top:1.35rem;bottom:-2.4rem; width:1px;background:var(--line)} .station:last-child .zeit::after{display:none} .station .rolle{font-family:'Schibsted Grotesk',sans-serif;font-weight:700; font-size:1.06rem;letter-spacing:-.012em;line-height:1.3} .station .haus{font-size:.9rem;color:var(--blue);font-weight:600;margin-top:.12rem} .station .was{font-size:.93rem;color:var(--ink-2);margin-top:.45rem;max-width:58ch; line-height:1.6} @media(max-width:640px){ .station{grid-template-columns:1fr;gap:.35rem;padding-left:1.35rem} .station .zeit{padding-left:0} .station .zeit::before{left:-1.35rem} .station .zeit::after{left:-1.1rem;top:1.1rem;bottom:-1.4rem} } /* Kachel am Porträt: trägt eine Aussage statt einer Zahl. Die Größenordnungen stehen in der Kennzahlenleiste darunter, dort gehören sie hin. */ .karte-text .n{font-size:1.12rem;line-height:1.22;letter-spacing:-.015em} .karte-text{max-width:13.5rem} .karte-text .l{margin-top:.35rem} /* ── Aufzählungszeichen exakt auf die Mitte der ersten Textzeile ────────── Die em-Werte oben sind gerechnet, hängen aber an der jeweiligen Zeilenhöhe. Wo die Einheit lh zur Verfügung steht, wird die Mitte direkt bestimmt: Innenabstand oben plus halbe Zeilenhöhe, minus halbe Markerhöhe. Damit sitzt der Strich auch dann richtig, wenn sich Schriftgröße oder Zeilenhöhe später ändern. */ @supports (top: 1lh) { .fliess li::before { top: calc(.45rem + .5lh - 1px) } .fk li::before { top: calc(.45rem + .5lh - .75px) } .ueber .liste li::before { top: calc(.5lh - 4px) } .station .zeit::before { top: calc(.28rem + .5lh - 3.5px) } } /* Teil-Überschriften in den Rechtstexten (A) Datenschutzerklärung, B) Cookie-Richtlinie). Sie waren beim Umzug aus der alten Fassung zu nacktem Text geworden, und darunter stand ein blauer Strich aus der alten Palette. */ .rechtstext h2.teil{font-size:1.6rem;margin:3.2rem 0 1.4rem;padding-top:2rem; border-top:2px solid var(--navy)} .rechtstext h2.teil:first-child{margin-top:0;padding-top:0;border-top:0} /* ── Sprunglink und Hauptbereich ───────────────────────────────────────── Ohne
müssen Vorleseprogramme auf jeder Seite Balken, Logo und Navigation durchgehen, bevor der Inhalt beginnt. */ .sprung{position:absolute;left:-9999px;top:0;z-index:100; background:var(--navy);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 5px 0; font-size:.95rem;font-weight:600} .sprung:focus{left:0} main{display:block} /* Fuß- und Kastenüberschriften tragen jetzt die richtige Ebene (h2 statt h4), die Optik kommt aus der Klasse. */ .fuss-titel{color:#fff;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase; margin:0 0 .9rem;font-weight:600;font-family:'Geist',system-ui,sans-serif} .merk-titel{font-size:12.5px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-3);margin:0 0 .9rem; font-family:'Geist',system-ui,sans-serif} /* ── Klappmenü ─────────────────────────────────────────────────────────── Vorher öffnete es allein per :hover, und der Auslöser war ein echter Link. Auf Tablets zwischen 961 und 1200 Pixeln war es damit unbedienbar: Tippen sprang auf die Seite, statt aufzuklappen. Jetzt trägt ein eigener Knopf das Aufklappen, Hover ergänzt es nur auf Geräten, die Hover können. */ .klapp>a{display:inline-flex;align-items:center} .klapp-knopf{background:none;border:0;padding:.25rem .1rem .25rem .3rem;margin:0; cursor:pointer;color:inherit;font:inherit;display:inline-flex;align-items:center; line-height:1} .klapp-knopf:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px} @media(hover:hover) and (pointer:fine){ .klapp:hover .klapp-inhalt,.klapp:focus-within .klapp-inhalt{ opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto} .klapp:hover .pfeil-ab,.klapp:focus-within .pfeil-ab{transform:rotate(225deg) translateY(-3px)} } /* ── Querverweise zwischen den Säulenseiten ──────────────────────────────── */ .verwandte{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem} @media(max-width:820px){.verwandte{grid-template-columns:1fr}} .verwandt{display:block;background:var(--paper);border:1px solid var(--line); border-radius:6px;padding:1.35rem 1.5rem;transition:border-color .25s var(--ease), transform .25s var(--ease),box-shadow .25s var(--ease)} .verwandt::after{content:none} .verwandt:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--sh)} .verwandt strong{display:block;font-family:'Schibsted Grotesk',system-ui,sans-serif; font-size:1.06rem;color:var(--navy);margin-bottom:.35rem} .verwandt:hover strong{color:var(--blue)} .verwandt span{display:block;font-size:14px;color:var(--ink-2);line-height:1.5} .verwandte-band .kopfzeile{margin-bottom:1.6rem} /* ── Sprachumschalter ──────────────────────────────────────────────────── Bewusst als schlichter Link gebaut, nicht als Schalter mit Fähnchen: Es gibt genau zwei Fassungen, und die Beschriftung nennt immer die andere. Ein Fähnchen stünde ausserdem für ein Land, nicht für eine Sprache. Die Auswahl wird nicht gespeichert — siehe Kopf von seitenbau.py. */ header nav .sprachwahl{font-size:13px;font-weight:600;letter-spacing:.03em; color:var(--ink-3);border:1px solid var(--line);border-radius:99px; padding:.34rem .7rem; transition:color .25s var(--ease),border-color .25s var(--ease)} header nav .sprachwahl::after{content:none} header nav .sprachwahl:hover{color:var(--blue);border-color:var(--blue)} .menue-mobil .sprachwahl{font-weight:600;color:var(--ink-3)} /* Hinweis auf die Sprache eines verlinkten Textes. Die Fachartikel erscheinen nur auf Deutsch; das gehört auf der englischen Fassung dazugesagt, sonst klickt jemand ins Leere. */ .sprachmarke{display:inline-block;font-size:11.5px;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3); border:1px solid var(--line);border-radius:3px;padding:.1rem .4rem; vertical-align:.1em;margin-left:.5rem} .ak .sprachmarke{margin-left:.55rem;margin-bottom:.5rem;vertical-align:.05em} /* Hinweis auf die massgebliche Sprachfassung eines Rechtstextes. Die deutschen Fassungen sind die verbindlichen; die englischen sind Uebersetzungen. Das gehoert sichtbar an den Anfang, nicht in eine Fussnote. */ .rechtshinweis{background:var(--blue-soft);border-left:3px solid var(--blue); border-radius:0 4px 4px 0;padding:1rem 1.2rem;margin:0 0 2.4rem;font-size:.94rem} .rechtshinweis a{text-decoration:underline} /* statt im Formatfeld: die drei Knoepfe gehoeren zusammen, und nur legend sagt das einem Vorleseprogramm. Optik unveraendert — der Browser gibt legend eigene Vorgaben mit, die hier zurueckgesetzt werden. */ .formate>legend{font-size:13px;font-weight:600;color:var(--ink-2); padding:0;float:left;width:100%} /* Der Erfolgskasten bekommt nach dem Absenden den Fokus, damit Vorleseprogramme die Bestaetigung ansagen. tabindex="-1" wuerde sonst einen Rahmen zeigen. */ .erfolg:focus{outline:none} .erfolg:focus-visible{outline:2px solid var(--blue);outline-offset:3px} /* Nur fuer Vorleseprogramme sichtbar. Auf drei Seiten folgen Karten mit

direkt auf die

, ohne dass gestalterisch eine Zwischenueberschrift hingehoert. Die Ebene fehlt aber trotzdem — dieser Titel schliesst sie, ohne die Seite zu veraendern. */ .nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}