:root{ --forest:#0d2b21; --forest2:#143c2e; --cream:#faf6ed; --sand:#efe6d5; --gold:#e3c27a; --ink:#17261f; --muted:#617068; --white:#fff; --line:rgba(23,38,31,.15); --serif:Georgia,"Times New Roman",serif; --heading:600 clamp(1.55rem,2.5vw,2.15rem)/1.12 var(--serif); --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.00;overflow-x:hidden} body.menu-open{overflow:hidden} img{display:block;width:100%} a{color:inherit;text-decoration:none} button,input,textarea{font:inherit} button{cursor:pointer} /* Sprachauslieferung .i18n-pending liegt auf , solange die Texte der gewaehlten Sprache noch nicht eingesetzt sind. Uebersetzbare Stellen bleiben dann unsichtbar, behalten aber ihren Platz - so blitzt unter /en/ oder /pt-br/ nie die deutsche Vorlage aus dem Markup auf. index.html nimmt die Klasse spaetestens nach 5 Sekunden selbst wieder weg, damit die Seite nie dauerhaft leer bleibt. .locale-fallback ist der sichtbare Hinweis, wenn eine Sprachdatei fehlt. */ html.i18n-pending [data-i18n]{visibility:hidden} .locale-fallback{position:fixed;z-index:80;bottom:0;left:0;right:0;margin:0;padding:.7rem 4vw;background:var(--forest);color:var(--cream);font-size:.8rem;line-height:1.35;text-align:center} .locale-fallback[hidden]{display:none} .nav{position:fixed;z-index:60;top:0;left:0;right:0;height:82px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;color:#fff;background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent);transition:.3s} .nav.scrolled{background:rgba(13,43,33,.96);backdrop-filter:blur(12px);box-shadow:0 12px 34px rgba(0,0,0,.14)} .brand{display:flex;align-items:center;gap:.7rem} .brand img{width:42px;height:42px} .brand strong,.brand small{display:block} .brand strong{font:600 1rem var(--serif);letter-spacing:.04em} .brand small{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7} .navlinks{display:flex;gap:1.45rem;font-size:.85rem} .navlinks a{opacity:.83} .navlinks a:hover{opacity:1} .nav-actions{display:flex;align-items:center;gap:.7rem} .language{display:flex;border:1px solid rgba(255,255,255,.38);border-radius:999px;padding:2px} .language button{border:0;background:transparent;color:#fff;border-radius:999px;padding:.42rem .55rem;font-size:.68rem;font-weight:800} .language button.active{background:#fff;color:var(--forest)} .menu-button{display:none;border:1px solid rgba(255,255,255,.4);border-radius:50%;width:42px;height:42px;background:transparent;color:#fff;font-size:1.1rem} .mobile-menu{display:none;position:fixed;z-index:55;top:82px;left:0;right:0;background:var(--forest);color:#fff;padding:2rem 6vw;flex-direction:column;gap:1rem} .mobile-menu.open{display:flex} .button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;padding:.82rem 1.22rem;font-weight:800;border:1px solid transparent;transition:.2s} .button:hover{transform:translateY(-2px)} .button-gold{background:var(--gold);color:#18241e} .button-outline{background:transparent;color:inherit;border-color:currentColor} .text-button{font-weight:800;border-bottom:1px solid currentColor;padding-bottom:.15rem} .section{padding:88px 8vw} .eyebrow,.overline{margin:0 0 1rem;font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#92723e} .eyebrow.light{color:#e4c48c} /* Hoehe des Hero: auf breiten Fenstern wie bisher volle Bildschirmhoehe. Wird das Fenster schmaler, schrumpft das Foto (16:9, object-fit:contain) - die Sektion folgt dann der Bildhoehe (Seite = 80% Breite -> 45vw), sodass zwischen Header und Foto nur noch ca. ein Finger breit (~60px) gruener Hintergrund bleibt. Der Text liegt im Fluss (unten ausgerichtet), damit die Sektion nie kleiner wird als der Text braucht. */ .hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(max(100svh,710px),calc(45vw + 284px));padding:120px 0 15vh;color:#fff;overflow:hidden;background:#051710} .hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;animation:heroZoom 16s ease-out both} @keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.075)}} .hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,23,16,.87) 0%,rgba(5,23,16,.47) 48%,rgba(5,23,16,.12) 80%),linear-gradient(0deg,rgba(5,23,16,.65),transparent 48%)} .hero-content{position:relative;align-self:flex-start;margin-left:8vw;max-width:850px} .overline{color:#efd29f} .hero h1{font:600 clamp(4.2rem,9vw,9rem)/.78 var(--serif);letter-spacing:-.045em;margin:0 0 1.6rem} .hero-title{font:600 clamp(1.45rem,2.6vw,2.65rem)/1.18 var(--serif);max-width:700px;margin:0} .hero-buttons{display:flex;align-items:center;gap:1.35rem;margin-top:2rem} .hero-hosts{position:absolute;right:5vw;bottom:4vh;text-align:right} .hero-hosts span,.hero-hosts strong{display:block} .hero-hosts span{font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;opacity:.66} .hero-hosts strong{font:600 1.15rem var(--serif)} .scroll{position:absolute;left:50%;bottom:2rem;font-size:1.4rem;animation:bounce 1.7s infinite} @keyframes bounce{50%{transform:translateY(8px)}} .statement{text-align:center;max-width:1250px;margin:auto} .statement h2,.split h2,.section-head h2,.location h2,.booking h2,.people-story h2{font:600 clamp(2.05rem,4vw,4.35rem)/1.05 var(--serif);margin:.2rem 0 1.3rem} .statement h2{max-width:1100px;margin-inline:auto} .lead{max-width:790px;margin:1.4rem auto 0;color:var(--muted);font-size:1.08rem} .split{display:grid;grid-template-columns:.95fr 1.05fr;gap:7vw;align-items:center} .split-copy p{color:#526158} .portrait{margin:0} .portrait img{height:720px;object-fit:cover;border-radius:280px 280px 24px 24px} .portrait figcaption{font-size:.8rem;color:var(--muted);margin-top:.7rem} /* Vollbild-Sektion wie der Hero: das Bild wird nie beschnitten, sondern skaliert mit der Fensterbreite mit. Die Hoehe der Sektion folgt dem Seitenverhaeltnis des Bildes (16:9), object-fit:contain haelt das Motiv auch dann komplett sichtbar, wenn spaeter ein Bild mit anderem Format eingesetzt wird - dann bleibt links/rechts bzw. oben/unten der dunkle Hintergrund. */ .full-image{position:relative;height:auto;aspect-ratio:16/9;background:#051710} .full-image img{height:100%;object-fit:contain;object-position:center center} .image-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,24,17,.78),transparent 58%)} .image-quote{position:absolute;left:8vw;bottom:10%;z-index:2;color:#fff} .image-quote span{display:block;text-transform:uppercase;letter-spacing:.17em;font-size:.72rem} .image-quote strong{display:block;font:600 clamp(1.95rem,4.1vw,4.25rem)/1.05 var(--serif);max-width:850px;margin-top:.4rem} .parallax{position:relative;min-height:760px;color:#fff;display:flex;align-items:end;overflow:hidden} .parallax-bg{position:absolute;inset:-12%;background-position:center;background-size:cover;background-attachment:fixed} .parallax:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,24,17,.78),transparent 60%)} .parallax-copy{position:relative;z-index:2;padding:0 8vw 9vh;max-width:900px} .parallax h2{font:600 clamp(2.45rem,4.9vw,5.3rem)/1 var(--serif);margin:.2rem 0 1rem} .parallax p:last-child{max-width:680px;font-size:1.08rem} .section-head{max-width:900px} .mag-grid{margin-top:3rem;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:92px;gap:12px} .photo{position:relative;border:0;padding:0;background:none;overflow:hidden;cursor:zoom-in} .photo img{height:100%;object-fit:cover;transition:.5s} .photo:hover img{transform:scale(1.035)} .photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.57),transparent 50%)} .photo span{position:absolute;z-index:2;left:1rem;bottom:.85rem;color:#fff;font:600 1.25rem var(--serif)} .photo-a{grid-column:1/6;grid-row:1/6} .photo-b{grid-column:6/13;grid-row:1/4} .photo-c{grid-column:6/10;grid-row:4/8} .photo-d{grid-column:10/13;grid-row:4/8} .photo-e{grid-column:1/7;grid-row:6/10} .photo-f{grid-column:7/13;grid-row:8/10} /* "Die Oca": das querformatige Bild steht jetzt in voller Breite ueber dem Text (nicht mehr als hohe Spalte daneben). Die Hoehe folgt dem Seitenverhaeltnis des Bildes, object-fit:contain haelt es komplett sichtbar und skaliert mit der Fensterbreite mit - wie hero.webp und modern-oca.webp. */ .oca-section{display:grid;grid-template-columns:1fr;background:var(--forest);color:#fff} .oca-image{background:var(--forest)} .oca-image img{height:auto;aspect-ratio:1040/650;object-fit:contain;object-position:center center} .oca-copy{padding:6vw 8vw 8vw;display:flex;flex-direction:column;justify-content:center;max-width:1180px} .oca-copy h2{font:600 clamp(2.45rem,4.75vw,5.05rem)/1.03 var(--serif);margin:.2rem 0 1.3rem} .oca-copy>p{color:rgba(255,255,255,.74)} .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2.3rem 0} .facts div{border-top:1px solid rgba(255,255,255,.19);padding-top:1rem} .facts strong,.facts span{display:block} .facts strong{font:600 2.5rem var(--serif)} .facts span{font-size:.75rem;color:rgba(255,255,255,.6)} .people-story{display:grid;grid-template-columns:1fr .8fr;gap:8vw;align-items:center} .people-copy p{color:var(--muted)} .people-strip{display:flex;flex-direction:column;gap:1.1rem;border-left:2px solid var(--gold);padding-left:2rem;font:600 clamp(1.5rem,2.6vw,2.7rem)/1.12 var(--serif)} .people-strip strong{color:#8f6d36} /* "Die Natur schreibt jeden Tag neue Geschichten.": das Bild rechts behaelt sein Seitenverhaeltnis (1297x811). Die Zeilenhoehe folgt dem Bild statt einer festen Mindesthoehe, object-fit:contain haelt es komplett sichtbar - es wird also nirgends beschnitten und skaliert mit der Fensterbreite mit. */ .editorial{display:grid;grid-template-columns:1.25fr .75fr;background:#fff;align-items:center} .editorial.reverse{grid-template-columns:.75fr 1.25fr} .editorial.reverse img{order:2} .editorial>img{width:100%;height:auto;aspect-ratio:1297/811;object-fit:contain;object-position:center center} .editorial-text{padding:5vw 4vw;display:flex;flex-direction:column;justify-content:center} .editorial-text>span{color:var(--gold);font-size:.74rem} .editorial-text h2{font:600 clamp(2.25rem,4.1vw,4.5rem)/1.04 var(--serif);margin:.35rem 0 1rem} .editorial-text p{color:var(--muted);font-size:.87rem} .location{display:grid;grid-template-columns:.74fr 1.26fr;gap:5vw;align-items:center;background:var(--sand)} .location-copy>p{color:#56635b} .route{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem} .route div{border-top:1px solid var(--line);padding-top:1rem} .route small,.route strong,.route span{display:block} .route small{color:var(--gold)} .route strong{font:600 1.15rem var(--serif)} .route span{font-size:.76rem;color:var(--muted)} .map{border-radius:22px;box-shadow:0 20px 55px rgba(17,40,30,.14)} .booking{display:grid;grid-template-columns:.9fr 1.1fr;gap:7vw;background:var(--forest2);color:#fff} .booking-intro p:last-child{color:rgba(255,255,255,.7)} .request-box{border:1px solid rgba(255,255,255,.2);padding:2rem;border-radius:22px;background:rgba(255,255,255,.05)} .request-grid{display:grid;grid-template-columns:1fr 1fr .6fr;gap:1rem} .request-box label span{display:block;margin-bottom:.35rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.65)} .request-box input,.request-box textarea{width:100%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:.85rem;outline:none} .request-box input:focus,.request-box textarea:focus{border-color:var(--gold)} .request-box textarea::placeholder{color:rgba(255,255,255,.42)} .message-label{display:block;margin-top:1rem} .request-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem} .config-note{font-size:.72rem;color:rgba(255,255,255,.48);margin-bottom:0} .config-note code{color:#efd29f} .footer{position:relative;min-height:640px;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden} .footer>img{position:absolute;inset:0;height:100%;object-fit:cover} .footer-shade{position:absolute;inset:0;background:rgba(5,24,17,.72)} .footer-content{position:relative;z-index:2;padding:4rem 6vw} .footer-content p{font:600 clamp(1.95rem,4.1vw,4.25rem)/1.06 var(--serif);max-width:900px;margin:0 auto 2rem} .footer-content>strong{display:block;font:600 2rem var(--serif);letter-spacing:.08em} .footer-content>span{display:block;opacity:.72} .footer-links{display:flex;justify-content:center;gap:1.3rem;margin-top:2rem} dialog{padding:0;border:0;background:transparent;max-width:min(94vw,1400px)} dialog::backdrop{background:rgba(0,0,0,.88)} dialog img{max-height:88vh;object-fit:contain} dialog button{position:fixed;right:1.3rem;top:1rem;width:44px;height:44px;border:0;border-radius:50%;background:#fff;font-size:1.5rem} .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s ease} .reveal.visible{opacity:1;transform:none} @media(max-width:1000px){ .navlinks{display:none} .menu-button{display:block} .desktop-cta{display:none} .split,.people-story,.location,.booking{grid-template-columns:1fr} .portrait img{height:570px} .parallax-bg{background-attachment:scroll} .editorial,.editorial.reverse{grid-template-columns:1fr} .editorial.reverse img{order:0} .request-grid{grid-template-columns:1fr 1fr} .request-grid label:last-child{grid-column:1/3} } @media(max-width:650px){ .nav{height:74px;padding:0 4vw} .brand small{display:none} .mobile-menu{top:74px} .section{padding:64px 6vw} .hero{min-height:min(max(100svh,640px),calc(45vw + 268px));padding:110px 0 calc(4vh + 76px)} .hero h1{font-size:4.1rem} .hero-content{align-self:stretch;margin:0 6vw} .hero-buttons{align-items:flex-start;flex-direction:column} .hero-hosts{left:6vw;right:auto;text-align:left} .portrait img{height:480px} .mag-grid{display:block} .photo{display:block;width:100%;height:320px;margin-bottom:10px} .oca-copy{padding:48px 6vw 64px} .facts{grid-template-columns:1fr 1fr} .editorial-text{padding:56px 6vw 64px} .route{grid-template-columns:1fr} .request-grid{grid-template-columns:1fr} .request-grid label:last-child{grid-column:auto} .request-box{padding:1.2rem} .footer-links{flex-wrap:wrap} } @media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important;animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} } /* V5: bewusst reduzierte Bilddramaturgie – ein Motiv pro Foto */ .curated-grid{ margin-top:3rem; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } /* Der Rahmen folgt dem Hochformat (3:4) der drei Fotos, statt eine feste Hoehe zu erzwingen. So zeigt object-fit:contain jedes Motiv vollstaendig: wird das Fenster schmaler, wird das Bild nur kleiner und nichts wird beschnitten. */ .curated-photo{ position:relative; aspect-ratio:3/4; border:0; padding:0; overflow:hidden; background:#051710; cursor:zoom-in; } .curated-photo img{ width:100%; height:100%; object-fit:contain; transition:transform .45s ease; } .curated-photo:hover img{transform:scale(1.035)} .curated-photo:after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 55%); } .curated-photo span{ position:absolute; z-index:2; left:1.2rem; right:1.2rem; bottom:1.05rem; color:#fff; font:600 1.45rem var(--serif); text-align:left; } .footer.footer-solid{ min-height:500px; background:var(--forest); } .footer.footer-solid .footer-content{ position:relative; } @media(max-width:900px){ .curated-grid{grid-template-columns:1fr;justify-items:center} .curated-photo{width:100%;max-width:430px} } /* V8 – Bild im zweiten Abschnitt und optimierte Tablet-/Handy-Darstellung */ .statement-with-image{ max-width:none; display:grid; grid-template-columns:.9fr 1.1fr; column-gap:6vw; row-gap:clamp(2.5rem,5vw,4.5rem); align-items:center; text-align:left; } .statement-with-image .statement-copy{max-width:650px} .statement-with-image .lead{margin:1.4rem 0 0} /* Info row below the intro and the image: spans both columns and splits the stay information into its three blocks side by side. */ .statement-details{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(1.8rem,3vw,3rem); align-items:stretch; } .stay-block{display:flex;flex-direction:column} .stay-block>:first-child{margin-top:0} .statement-image{margin:0} .statement-image img{ /* Portrait original (794x1122): the box carries exactly that ratio at every width, so the picture is never cut off at its edges - only the corner rounding reaches into it. No viewport-height cap on purpose: a cap in vh squashed the box off-ratio and cropped the motif at some zoom levels. The height follows the column width instead, which the section's own max-width already bounds to roughly 490-760px. */ width:100%; height:auto; aspect-ratio:794/1122; object-fit:contain; border-radius:220px 220px 22px 22px; } .statement-image figcaption{ margin-top:.8rem; font:600 1.25rem var(--serif); color:var(--muted); } /* Facts and access note: part of the statement copy column, so they inherit its text colour and run as one single-column list under the lead paragraphs. */ .stay-facts{ margin:1.5rem 0 0; padding:0; list-style:none; } .stay-facts li{ position:relative; margin:.6rem 0; padding-left:1.35rem; color:var(--muted); line-height:1.5; } .stay-facts li:before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--gold); } .stay-facts strong{color:var(--ink)} /* Sub-headings that split the facts into the Oca Prime, Oca Signature and Oca Experience packages and the extended arrangements. Each heading carries the space above its list. */ .stay-facts-title{ margin:1.9rem 0 0; /* Same serif as the "Some places are visited." headline above, so the package names read editorial instead of like a document heading. Display treatment to match it: bold, tight leading and no extra tracking - the .01em the headings used to carry is what made them look spaced out and clerical. 1.472rem is the original 1.28rem plus 15%. */ font:700 1.472rem/1.2 var(--serif); color:#000; } .stay-facts-title+.stay-facts{margin-top:.65rem} /* "Included" / "Not included" labels that split a package into its two lists. */ .stay-facts-note{ margin:.4rem 0 0; color:var(--muted); font-weight:600; } .stay-facts-note+.stay-facts{margin-top:.65rem} /* A second label follows a finished list, so it carries the gap above itself. The auto margin eats the card's leftover height, so the "Not included" pair sits on the bottom edge and lines up across the cards of a row. */ .stay-facts+.stay-facts-note{margin-top:auto;padding-top:1.1rem} /* Request button that closes a package card: it carries the package name and fills the card width, so the three buttons read as one row of equal choices. */ .stay-cta{ margin-top:1.4rem; font-size:.95rem; text-align:center; } @media(max-width:1100px){ .section{padding-left:6vw;padding-right:6vw} .statement-with-image{grid-template-columns:1fr 1fr;column-gap:4vw} .statement-details{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} } @media(max-width:820px){ .statement-with-image{grid-template-columns:1fr;row-gap:2.4rem} .statement-details{grid-template-columns:1fr;gap:2.2rem} /* Full column width would make the portrait up to 1000px tall here, so the cap is a width rather than a height: the ratio stays intact and the picture stays whole, it just gets smaller and sits centred under its own caption. */ .statement-image{text-align:center} .statement-image img{ max-width:440px; margin-inline:auto; border-radius:180px 180px 20px 20px; } .split,.location,.booking{grid-template-columns:1fr} .curated-grid{grid-template-columns:1fr;justify-items:center} .curated-photo{width:100%;max-width:400px} } /* From here on the three package cards fit side by side, so they share the rows of .statement-details instead of sizing themselves: heading, "Included" label, list, "Not included" label, list, request button. The heading row is as tall as the longest heading, which puts every "Included" on the same line; the list row takes the leftover height, which puts every "Not included" on the same line above the bottom edge. The column count is fixed at three on purpose - a fourth package card needs this number and the cards per row raised together, otherwise it lands on top of the first one. */ @media(min-width:1001px){ .statement-details{ grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto auto 1fr auto auto auto; column-gap:clamp(1.8rem,3vw,3rem); row-gap:0; } .stay-block{ display:grid; grid-row:1 / -1; grid-template-rows:subgrid; } /* Last row of the shared grid, so every package button sits on the bottom edge of its card even when a package has no "Not included" pair above it. */ .stay-cta{ grid-row:-2 / -1; align-self:end; } } @media(max-width:560px){ .statement-image img{border-radius:130px 130px 18px 18px} .curated-photo{max-width:330px} .request-grid{grid-template-columns:1fr} .request-grid label:last-child{grid-column:auto} } /* Equipment and FAQ */ .gear{background:#f5efe3} .gear-intro{max-width:980px} .gear-intro h2,.faq-head h2{ font:600 clamp(2.3rem,4.1vw,4.55rem)/1.03 var(--serif); margin:.2rem 0 1.2rem; } .gear-intro>p{max-width:800px;color:var(--muted)} .affiliate-disclosure{ display:flex; flex-wrap:wrap; gap:.45rem 1rem; margin-top:1.5rem; padding:1rem 1.15rem; border-left:3px solid var(--gold); background:rgba(255,255,255,.55); font-size:.82rem; } .affiliate-disclosure strong{text-transform:uppercase;letter-spacing:.08em} .gear-group{margin-top:4rem} .gear-group-head{ display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:1.4rem; padding-bottom:1rem; border-bottom:1px solid var(--line); } .gear-group-head span{ font:600 clamp(1.65rem,2.7vw,2.6rem) var(--serif); } .gear-group-head p{margin:0;color:var(--muted);max-width:500px} .gear-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .gear-card{ min-height:330px; display:flex; flex-direction:column; padding:1.4rem; background:#fff; border:1px solid rgba(23,38,31,.1); transition:transform .25s,box-shadow .25s; } .gear-card:hover{transform:translateY(-5px);box-shadow:0 18px 45px rgba(20,45,34,.1)} .gear-card.featured{background:var(--forest);color:#fff;border-color:transparent} .gear-icon{ width:52px;height:52px;border-radius:50%; display:grid;place-items:center; background:var(--sand);color:var(--forest); font-size:1.45rem;margin-bottom:1.5rem } .featured .gear-icon{background:var(--gold)} .gear-category{ margin:0 0 .35rem; color:#94713b; font-size:.67rem;font-weight:800; letter-spacing:.13em;text-transform:uppercase } .featured .gear-category{color:#e4c48c} .gear-card h3{font:600 1.45rem/1.18 var(--serif);margin:0 0 .8rem} .gear-card>p:not(.gear-category){font-size:.86rem;color:var(--muted)} .featured>p:not(.gear-category){color:rgba(255,255,255,.68)} .amazon-link{ margin-top:auto; padding-top:1rem; border-top:1px solid var(--line); font-size:.8rem;font-weight:800; } .featured .amazon-link{border-color:rgba(255,255,255,.18);color:#efd29f} .gear-premium{margin-top:5rem} .premium-grid{grid-template-columns:repeat(4,1fr)} .gear-note{font-size:.75rem;color:var(--muted);margin-top:1rem} .faq{background:var(--cream);display:grid;grid-template-columns:.72fr 1.28fr;gap:7vw} .faq-head{position:sticky;top:125px;align-self:start} .faq-head p:last-child{color:var(--muted)} .faq-list{border-top:1px solid var(--line)} .faq-list details{border-bottom:1px solid var(--line)} .faq-list summary{ position:relative; list-style:none; cursor:pointer; padding:1.45rem 3.4rem 1.45rem 0; font:600 clamp(1.15rem,1.7vw,1.55rem)/1.25 var(--serif) } .faq-list summary::-webkit-details-marker{display:none} .faq-list summary:after{ content:"+"; position:absolute;right:.2rem;top:1.15rem; font:400 2rem var(--sans);color:#9c773e } .faq-list details[open] summary:after{content:"−"} .faq-list details p{ margin:-.45rem 3.4rem 1.5rem 0; color:var(--muted);max-width:780px } @media(max-width:1250px){ .navlinks{display:none} .menu-button{display:block} .desktop-cta{display:none} } @media(max-width:1050px){ .gear-grid,.premium-grid{grid-template-columns:repeat(2,1fr)} .faq{grid-template-columns:1fr} .faq-head{position:static} } @media(max-width:650px){ .gear-grid,.premium-grid{grid-template-columns:1fr} .gear-group-head{display:block} .gear-group-head p{margin-top:.6rem} .gear-card{min-height:295px} .faq-list summary{padding-right:2.5rem} .faq-list details p{margin-right:0} } /* V12 – echter Abschnitt "Amazonas erleben" */ .experience{background:#fff} .experience-head{max-width:980px;margin-bottom:3rem} .experience-head h2{ font:600 clamp(2.45rem,4.5vw,4.9rem)/1.02 var(--serif); margin:.2rem 0 1.2rem } .experience-head>p:last-child{max-width:820px;color:var(--muted)} .experience-layout{ display:grid; grid-template-columns:1.18fr .82fr; gap:14px } .experience-main,.experience-card{position:relative;margin:0;overflow:hidden;background:var(--forest)} .experience-main{min-height:760px} .experience-side{display:grid;grid-template-rows:1fr 1fr;gap:14px} .experience-card{min-height:373px} .experience-main img,.experience-card img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .7s ease } .experience-main:hover img,.experience-card:hover img{transform:scale(1.025)} .experience-main:after,.experience-card:after{ content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(5,24,17,.82),transparent 58%) } .experience-main figcaption,.experience-card figcaption{ position:absolute;z-index:2;left:0;right:0;bottom:0; padding:2rem;color:#fff } .experience-main figcaption{padding:3rem} .experience-main figcaption span,.experience-card figcaption span{ display:block;margin-bottom:.45rem; color:#efd29f;font-size:.69rem;font-weight:800; letter-spacing:.14em;text-transform:uppercase } .experience-main figcaption strong,.experience-card figcaption strong{ display:block;font:600 2rem/1.08 var(--serif) } .experience-main figcaption strong{font-size:clamp(2.4rem,4vw,4.5rem);max-width:720px} .experience-main figcaption p,.experience-card figcaption p{ max-width:680px;margin:.75rem 0 0;color:rgba(255,255,255,.75);font-size:.88rem } .experience-card figcaption strong{font-size:1.75rem} .experience-ideas{ margin-top:14px;padding:2rem; display:grid;grid-template-columns:1fr;gap:1.1rem; align-items:start;background:var(--sand) } .experience-ideas>span{ color:#8f6d36;font-size:.69rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase } .experience-ideas>div{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem} .experience-ideas>div strong{ display:flex;align-items:center;justify-content:center;text-align:center; border:1px solid rgba(23,38,31,.18);border-radius:999px; padding:.55rem .85rem;font-size:.78rem } .experience-ideas>p{margin:0;color:var(--muted);font-size:.8rem} @media(max-width:1000px){ .experience-layout{grid-template-columns:1fr} .experience-main{min-height:620px} .experience-side{grid-template-columns:1fr 1fr;grid-template-rows:auto} .experience-card{min-height:440px} .experience-ideas>div{grid-template-columns:repeat(3,1fr)} } @media(max-width:650px){ .experience-main{min-height:520px} .experience-side{grid-template-columns:1fr} .experience-card{min-height:430px} .experience-ideas{padding:1.5rem} .experience-ideas>div{grid-template-columns:repeat(2,1fr)} .experience-main figcaption,.experience-card figcaption{padding:1.4rem} .experience-main figcaption strong{font-size:2.35rem} .experience-card figcaption strong{font-size:1.55rem} } .power-notice{ margin:1.25rem 0 0; padding:1rem 1.1rem; border-left:3px solid var(--gold); background:rgba(255,255,255,.08); } .power-notice strong{ display:block; color:#efd29f; font:600 1.15rem var(--serif); } .power-notice p{ margin:.35rem 0 0; color:rgba(255,255,255,.7); font-size:.86rem; } /* V14 – Direktbuchung als primäres Ziel */ .hero-booking-button{ min-width:190px; box-shadow:0 14px 34px rgba(209,164,95,.28); } .hero-booking-benefits{ display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; margin-top:1.2rem; color:rgba(255,255,255,.82); font-size:.76rem; } .hero-booking-benefits span{ position:relative; padding-left:1rem; } .hero-booking-benefits span:before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--gold); } .booking{ grid-template-columns:.76fr 1.24fr; } .booking-subline{ font:600 clamp(1.2rem,1.8vw,1.7rem)/1.3 var(--serif); color:#efd29f !important; max-width:650px; margin:.7rem 0 1.1rem; } .booking-benefits{ grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:-1rem 0 1rem; } .booking-benefits article{ padding:1.25rem; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); } .booking-benefits span{ color:var(--gold); font-size:.7rem; letter-spacing:.13em; } .booking-benefits strong{ display:block; margin:.4rem 0; font:600 1.25rem var(--serif); } .booking-benefits p{ margin:0; color:rgba(255,255,255,.62); font-size:.8rem; } .booking-submit{ min-width:240px; box-shadow:0 12px 30px rgba(209,164,95,.22); } .floating-booking{ background:var(--gold); color:#17261f; padding:.95rem 1.15rem; } .mobile-booking-bar{ display:none; } @media(max-width:1000px){ .booking{grid-template-columns:1fr} .booking-benefits{grid-column:auto} } @media(max-width:720px){ body{padding-bottom:76px} .floating-booking{display:none} .mobile-booking-bar{ position:fixed; z-index:70; left:0; right:0; bottom:0; min-height:70px; display:flex; align-items:center; justify-content:center; flex-direction:column; background:var(--gold); color:#17261f; box-shadow:0 -12px 28px rgba(0,0,0,.2); padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); text-align:center; } .mobile-booking-bar span{ font-weight:900; font-size:1rem; } .mobile-booking-bar small{ font-size:.68rem; opacity:.72; } .booking-benefits{ grid-template-columns:1fr; } .hero-booking-benefits{ display:grid; gap:.35rem; } .request-actions{ display:grid; grid-template-columns:1fr; } .request-actions .button{ width:100%; } } /* V15 – ein klarer Buchungsimpuls statt mehrfacher CTAs */ .nav-contact{ display:inline-flex; align-items:center; min-height:42px; padding:0 .4rem; color:#fff; font-size:.82rem; font-weight:700; border-bottom:1px solid rgba(255,255,255,.55); } .nav-contact:hover{border-color:var(--gold);color:#fff4d5} .hero-booking-button{ background:var(--gold); color:#17261f; box-shadow:0 14px 34px rgba(227,194,122,.24); } .hero-booking-button:hover{ background:#efd797; } .floating-booking, .mobile-booking-bar{ display:none !important; } @media(max-width:720px){ body{padding-bottom:0} } /* V16 – Direktbuchung links erklärt, rechts sofort anfragen */ .booking-v16{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(520px,1.14fr); gap:5vw; align-items:start; } .booking-v16 .booking-intro{ position:sticky; top:120px; } .booking-v16 .booking-intro>p:not(.eyebrow):not(.booking-subline){ color:rgba(255,255,255,.7); max-width:680px; } .direct-benefits{ margin-top:2.2rem; display:grid; gap:1rem; } .direct-benefits>div{ display:grid; grid-template-columns:42px 1fr; column-gap:1rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.18); } .direct-benefits span{ grid-row:1/3; color:var(--gold); font-size:.72rem; letter-spacing:.1em; } .direct-benefits strong{ font:600 1.2rem var(--serif); } .direct-benefits p{ margin:.25rem 0 0; color:rgba(255,255,255,.58); font-size:.8rem; } .booking-form{ margin:0; padding:2rem; background:#fff; color:var(--ink); border:0; border-radius:24px; box-shadow:0 25px 70px rgba(0,0,0,.2); } .booking-form .form-heading{ margin-bottom:1.5rem; } .booking-form .form-heading .eyebrow{ color:#9b7436; } .booking-form .form-heading h3{ margin:.15rem 0 .55rem; font:600 clamp(2rem,3vw,3.15rem)/1.05 var(--serif); } .booking-form .form-heading p:last-child{ margin:0; color:var(--muted); font-size:.88rem; } .booking-form .request-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .booking-form .field-wide{ grid-column:1/-1; } .booking-form label span{ color:#526158; font-weight:800; } .booking-form input, .booking-form textarea{ color:var(--ink); background:#f7f3ea; border-color:rgba(23,38,31,.15); } .booking-form input::placeholder, .booking-form textarea::placeholder{ color:#8a938e; } .booking-form input:focus, .booking-form textarea:focus{ border-color:#b48a48; box-shadow:0 0 0 3px rgba(227,194,122,.18); } .contact-hint, .privacy-note{ color:var(--muted); font-size:.75rem; } .contact-hint{ margin:1rem 0 .35rem; } .privacy-note{ margin:1rem 0 0; } .form-error{ display:none; margin:.7rem 0 0; padding:.75rem .9rem; border-left:3px solid #a74032; background:#fff0ec; color:#7d2f25; font-size:.82rem; } .form-error.show{ display:block; } .booking-form .request-actions{ display:grid; grid-template-columns:1fr; gap:.7rem; margin-top:1.15rem; } .booking-form .button-outline{ color:var(--forest); } .booking-form .config-note{ color:#8a938e; } .booking-form .config-note code{ color:#7f5d29; } @media(max-width:1100px){ .booking-v16{ grid-template-columns:1fr; } .booking-v16 .booking-intro{ position:static; } .direct-benefits{ grid-template-columns:repeat(3,1fr); } .direct-benefits>div{ display:block; } .direct-benefits span, .direct-benefits strong{ display:block; } } @media(max-width:720px){ .direct-benefits{ grid-template-columns:1fr; } .booking-form{ padding:1.25rem; border-radius:18px; } .booking-form .request-grid{ grid-template-columns:1fr; } .booking-form .field-wide{ grid-column:auto; } .booking-form .request-actions{ grid-template-columns:1fr; } } .honeypot{ position:absolute!important;overflow:hidden!important; clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important; width:1px!important;height:1px!important;margin:-1px!important; padding:0!important;border:0!important;white-space:nowrap!important; } .form-status{ display:none;margin-top:1rem;padding:.85rem 1rem;border-radius:10px; background:#f3eee4;color:var(--ink);font-size:.82rem; } .form-status.show{display:block} .form-status.success{background:#e5f3e9;color:#285f3b} .form-status.error{background:#fff0ec;color:#7d2f25} .booking-submit:disabled{opacity:.6;cursor:wait;transform:none} .gear-grid-six{grid-template-columns:repeat(3,1fr)} .more-gear{ margin-top:2rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line) } .more-gear summary{ list-style:none;cursor:pointer;position:relative;padding:1.4rem 3rem 1.4rem 0 } .more-gear summary::-webkit-details-marker{display:none} .more-gear summary:after{ content:"+";position:absolute;right:.4rem;top:1rem;color:#94713b;font-size:2rem } .more-gear[open] summary:after{content:"−"} .more-gear summary span{display:block;font:600 1.5rem var(--serif)} .more-gear summary small{display:block;margin-top:.25rem;color:var(--muted)} .more-gear-grid{grid-template-columns:repeat(3,1fr);padding-bottom:1rem} @media(max-width:1050px){ .gear-grid-six,.more-gear-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:650px){ .gear-grid-six,.more-gear-grid{grid-template-columns:1fr} } /* V20 – Reiseguide und präzise Verfügbarkeitsanfrage */ .request-not-binding{ margin:.35rem 0 0; padding:.72rem .85rem; border-left:3px solid var(--gold); background:#fbf6e9; color:#655a43; font-size:.76rem; } .guide-teaser{ background:var(--forest); color:#fff; } .guide-teaser-copy{max-width:820px} .guide-teaser h2{ margin:.15rem 0 1.2rem; font:600 clamp(2.45rem,4.65vw,5.15rem)/.98 var(--serif); letter-spacing:-.035em; } .guide-teaser-copy>p:not(.eyebrow){max-width:720px;color:rgba(255,255,255,.72)} .guide-teaser-stats{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.8rem 0} .guide-teaser-stats span{ padding:.55rem .8rem; border:1px solid rgba(255,255,255,.22); border-radius:999px; color:#efd29f; font-size:.73rem; font-weight:800; } .guide-teaser-copy small{display:block;margin-top:.75rem;color:rgba(255,255,255,.48)} /* Full travel guide */ .reading-progress{position:fixed;z-index:100;top:0;left:0;right:0;height:3px;background:transparent} .reading-progress span{display:block;width:0;height:100%;background:var(--gold);transition:width .08s linear} .guide-page{background:#f8f4ea} .guide-nav{position:fixed;background:rgba(13,43,33,.97)} .guide-print{ border:1px solid rgba(255,255,255,.45); border-radius:999px; padding:.52rem .8rem; background:transparent; color:#fff; font-size:.72rem; font-weight:800; } .guide-hero{position:relative;min-height:82svh;color:#fff;overflow:hidden} .guide-hero>img{position:absolute;inset:0;height:100%;object-fit:cover} .guide-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,23,16,.9),rgba(5,23,16,.43) 58%,rgba(5,23,16,.15)),linear-gradient(0deg,rgba(5,23,16,.62),transparent 50%)} .guide-hero-copy{position:relative;z-index:2;padding:190px 8vw 100px;max-width:1100px} .guide-hero h1{margin:.2rem 0 1.5rem;font:600 clamp(4rem,8.5vw,8.5rem)/.84 var(--serif);letter-spacing:-.055em} .guide-hero-copy>p:not(.overline){max-width:720px;font:600 clamp(1.25rem,2.2vw,2rem)/1.25 var(--serif)} .guide-hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem} .guide-date{display:block;margin-top:1.2rem;color:rgba(255,255,255,.62);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase} .guide-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.7fr);gap:7vw;align-items:start} .guide-intro h2{margin:.2rem 0 1.2rem;font:600 clamp(2.25rem,4.1vw,4.55rem)/1 var(--serif);letter-spacing:-.035em} .guide-intro-copy>p:not(.eyebrow){max-width:820px;color:var(--muted);font-size:1.02rem} .guide-update-note{padding:1.5rem;border-top:4px solid var(--gold);background:#fff;box-shadow:0 22px 55px rgba(44,51,43,.08)} .guide-update-note strong{font:600 1.5rem var(--serif)} .guide-update-note p{margin:.55rem 0 0;color:var(--muted);font-size:.87rem} .guide-update-note p.guide-update-fineprint{font-size:calc(.87rem * .6);line-height:1.55} .guide-shell{display:grid;grid-template-columns:260px minmax(0,900px);gap:7vw;align-items:start;padding-top:30px;justify-content:center} .guide-toc{position:sticky;top:115px;max-height:calc(100vh - 140px);overflow:auto;padding-right:.75rem} .guide-toc>p{margin:0 0 .7rem;color:#8f6d36;font-size:.7rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase} .guide-toc nav{display:flex;flex-direction:column;border-top:1px solid var(--line)} .guide-toc nav a{display:grid;grid-template-columns:34px 1fr;gap:.5rem;padding:.65rem 0;border-bottom:1px solid var(--line);color:#5e6b64;font-size:.76rem;line-height:1.25;transition:.2s} .guide-toc nav a span{color:#a47b3d;font-weight:900} .guide-toc nav a:hover,.guide-toc nav a.active{color:var(--forest);padding-left:.35rem} .guide-toc nav a.active{font-weight:900} .guide-toc-cta{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding:.85rem .95rem;background:var(--forest);color:#fff;font-size:.76rem;font-weight:900} .guide-article{min-width:0} .guide-chapter{scroll-margin-top:105px;padding:0 0 5rem;margin-bottom:5rem;border-bottom:1px solid var(--line)} .guide-chapter-heading{display:grid;grid-template-columns:66px 1fr;gap:1rem;align-items:start;margin-bottom:2rem} .guide-chapter-heading>span{padding-top:.6rem;color:#a57b3c;font-weight:900;letter-spacing:.12em} .guide-chapter-heading h2{margin:0;font:600 clamp(2.3rem,4.1vw,4.1rem)/.98 var(--serif);letter-spacing:-.035em} .guide-chapter h3{margin:2.4rem 0 .7rem;font:600 clamp(1.55rem,2.5vw,2.15rem)/1.15 var(--serif);color:#24503f} .guide-chapter>p{margin:.8rem 0;color:#4f5d56;font-size:.96rem} .guide-chapter a{color:#87652f;border-bottom:1px solid rgba(135,101,47,.35)} .guide-list{margin:.7rem 0 1.4rem;padding:0;list-style:none} .guide-list li{position:relative;margin:.45rem 0;padding-left:1.25rem;color:#4f5d56} .guide-list li:before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--gold)} .guide-callout{margin:2rem 0;padding:1.4rem 1.55rem;border-left:4px solid var(--gold);background:#f0eadc} .guide-callout strong{display:block;margin-bottom:.6rem;color:#8f6d36;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase} .guide-callout p{margin:.45rem 0;color:#4f5d56} .guide-callout-medical{background:#e8f0eb;border-left-color:#3d755e} .guide-callout-medical strong{color:#2f654f} .guide-table-wrap{overflow-x:auto;margin:1.5rem 0 2rem;border:1px solid var(--line);background:#fff} .guide-table{width:100%;min-width:620px;border-collapse:collapse;font-size:.84rem;line-height:1.45} .guide-table th{padding:.9rem 1rem;background:#194434;color:#fff;text-align:left;vertical-align:top} .guide-table td{padding:.85rem 1rem;border-top:1px solid #e2ddd2;vertical-align:top;color:#4b5952} .guide-table tbody:nth-of-type(even) td{background:#f8f5ed} .guide-table td:first-child{font-weight:800;color:#2d4e40} .guide-faq-chapter h3{margin-top:1rem;padding:1.1rem 1.25rem .35rem;background:#fff;border-radius:14px 14px 0 0} .guide-faq-chapter h3 + p{margin:0 0 1rem;padding:.25rem 1.25rem 1.2rem;background:#fff;border-radius:0 0 14px 14px;box-shadow:0 12px 30px rgba(33,43,36,.05)} .guide-final-cta{padding:4rem;background:var(--forest);color:#fff} .guide-final-cta h2{margin:.15rem 0 1rem;font:600 clamp(2.3rem,4.1vw,4.1rem)/1 var(--serif)} .guide-final-cta>p:not(.eyebrow){max-width:690px;color:rgba(255,255,255,.68)} .guide-final-cta .button{margin-top:1rem} .guide-footer{margin-top:0} @media(max-width:1050px){ .guide-navlinks{display:none} .guide-shell{grid-template-columns:1fr;max-width:980px;margin:auto} .guide-toc{position:static;max-height:none;padding:0} .guide-toc nav{display:grid;grid-template-columns:repeat(2,1fr)} .guide-toc nav a:nth-child(odd){border-right:1px solid var(--line);padding-right:.7rem} } @media(max-width:760px){ .guide-teaser{padding-top:80px;padding-bottom:80px} .guide-intro{grid-template-columns:1fr} .guide-hero{min-height:760px} .guide-hero-copy{padding:155px 6vw 80px} .guide-hero h1{font-size:clamp(3.7rem,17vw,6.3rem)} .guide-hero-actions{display:grid;max-width:340px} .guide-hero-actions .button{width:100%} .guide-print{display:none} .guide-shell{padding-left:5vw;padding-right:5vw} .guide-toc nav{grid-template-columns:1fr} .guide-toc nav a:nth-child(odd){border-right:0;padding-right:0} .guide-chapter-heading{grid-template-columns:44px 1fr} .guide-chapter-heading h2{font-size:clamp(1.95rem,9.8vw,3.3rem)} .guide-final-cta{padding:2.2rem 1.5rem} .guide-table{font-size:.78rem} } /* V21 – flache Überschriften-Hierarchie: H2 wird auf H3-Stufe gesetzt */ h2, .statement h2,.split h2,.section-head h2,.location h2,.booking h2,.people-story h2, .parallax h2,.oca-copy h2,.editorial-text h2,.gear-intro h2,.faq-head h2, .experience-head h2,.guide-teaser h2,.guide-intro h2,.guide-chapter-heading h2, .guide-final-cta h2, .booking-form .form-heading h3{ font:var(--heading); letter-spacing:-.015em; margin-top:.15rem; margin-bottom:.75rem; } h3,.guide-chapter h3,.guide-faq-chapter h3,.gear-card h3{line-height:1.12} .guide-chapter h3{margin-top:1.6rem} .guide-chapter-heading h2{margin:0} /* Zeilenabstand zwischen zwei aufeinanderfolgenden Überschriften minimal halten */ h2+h2,h2+h3,h3+h2,h3+h3, .guide-chapter h3+h3,.guide-faq-chapter h3+h3, .guide-chapter-heading+h3{margin-top:.1rem} h2:has(+h2),h2:has(+h3),h3:has(+h2),h3:has(+h3){margin-bottom:.1rem} .guide-chapter-heading{margin-bottom:1.2rem} .guide-chapter-heading:has(+h3){margin-bottom:.1rem} .guide-chapter-heading>span{padding-top:.15rem} /* V21 – die Seite nutzt maximal 80 % der Browserbreite, außerhalb davon werden weder Bilder noch Hintergründe gezeigt */ html{background:#fff} body{max-width:80%;margin-inline:auto} .nav,.mobile-menu,.reading-progress{left:10%;right:10%} dialog{max-width:min(80%,1400px)} @media print{ body{max-width:none;margin:0} .guide-nav,.guide-mobile-menu,.reading-progress,.guide-hero-actions,.guide-toc,.guide-final-cta,.guide-footer{display:none!important} .guide-page{background:#fff;color:#111} .guide-hero{min-height:0;height:auto;color:#111;page-break-after:always} .guide-hero>img,.guide-hero-shade{display:none} .guide-hero-copy{padding:40mm 18mm 20mm;max-width:none} .guide-hero h1{font-size:52pt} .guide-intro,.guide-shell{display:block;padding:12mm 18mm} .guide-update-note{box-shadow:none;border:1px solid #aaa;margin-top:10mm} .guide-chapter{page-break-before:always;border:0;margin:0;padding:0} .guide-chapter-heading h2{font-size:30pt} .guide-table-wrap{overflow:visible;border:1px solid #aaa} .guide-table{min-width:0;font-size:8.5pt} a{color:inherit!important;text-decoration:none!important;border:0!important} }