/* Tourismus-Training, Variante A "Die Route" (09.11.2026).
   Die Seite ist eine Führung: Treffpunkt, Route, Stationen. Signature: der gestrichelte Weg mit Stationspunkten.
   Fluide Werte nach Utopia (360 bis 1440 px): https://utopia.fyi/type/calculator */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/BricolageGrotesque-normal-200_800.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/Figtree-normal-400_800.woff2) format('woff2')}

:root{
  --donau:#0E3B36;        /* oklch(32% .05 180) */
  --donau-2:#16544D;
  --schirm:#FFC83D;       /* Guide-Schirm, oklch(86% .16 85) */
  --papier:#F5F4EF;
  --tinte:#11201E;
  --stein:#4F5D5A;
  --linie:#D9DDD6;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --text:'Figtree',system-ui,sans-serif;
  --step--1:clamp(.875rem,.85rem + .1vw,.94rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.125rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.5rem);
  --step-2:clamp(1.45rem,1.25rem + 1vw,2.1rem);
  --step-3:clamp(1.9rem,1.5rem + 2vw,3.2rem);
  --step-4:clamp(2.4rem,1.7rem + 3.4vw,4.6rem);
  --step-5:clamp(2.9rem,1.7rem + 6vw,7.2rem);
  --space-s:clamp(1rem,.9rem + .5vw,1.35rem);
  --space-m:clamp(1.5rem,1.3rem + 1vw,2.2rem);
  --space-l:clamp(2.5rem,2rem + 2.5vw,4.5rem);
  --space-xl:clamp(3.5rem,2.5rem + 5vw,7.5rem);
  --wrap:min(1240px,100% - 2rem);
  --radius:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 var(--step-0)/1.6 var(--text);overflow-wrap:break-word}
img,video,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1.5px}
:focus-visible{outline:3px solid var(--schirm);outline-offset:3px;border-radius:4px}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--schirm);padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem}
h1,h2,h3{font-family:var(--display);letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance}
p{margin:0 0 1em}
.kicker{font:700 var(--step--1)/1.2 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--donau-2);margin:0 0 .6rem}
.on-dark .kicker,.hero .kicker,.case-hero .kicker{color:var(--schirm)}

/* Kopf */
.site-head{position:sticky;top:0;z-index:30;background:var(--papier);border-bottom:2px solid var(--tinte)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1.4rem;padding:.7rem 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.6rem;font:800 1.12rem/1 var(--display);letter-spacing:-.02em;text-decoration:none}
.logo svg{width:36px;height:36px;flex:none}
.site-nav{display:flex;gap:.2rem 1.3rem;flex-wrap:wrap;font-weight:600}
.site-nav a{text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a[aria-current=page]{border-bottom-color:var(--schirm)}
@media (max-width:820px){.site-head .btn{display:none}.site-nav{order:3;width:100%;gap:.2rem 1.1rem;font-size:.95rem}}

.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--schirm);color:var(--tinte);font:700 1rem/1.1 var(--text);padding:.85rem 1.3rem;border-radius:999px;text-decoration:none;border:2px solid var(--tinte);box-shadow:4px 4px 0 var(--tinte);transition:transform .15s,box-shadow .15s;cursor:pointer}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--tinte)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tinte)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor;box-shadow:none}

/* Hero Startseite */
.hero{background:var(--donau);color:var(--papier);position:relative;overflow:clip}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(26rem,100%),1fr));gap:var(--space-l);align-items:center;padding:var(--space-l) 0}
.meet{display:inline-flex;align-items:center;gap:.5rem;font:700 var(--step--1)/1 var(--text);color:var(--schirm);margin:0 0 1.2rem}
.meet svg{width:20px;height:20px}
.hero h1{font-weight:200;font-size:var(--step-5);line-height:.93;letter-spacing:-.045em}
.hero h1 b{font-weight:800;color:var(--schirm)}
.lead{font-size:var(--step-1);line-height:1.45;max-width:36ch;margin:1.5rem 0 2rem}
.hero-photo{margin:0;position:relative}
.hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:240px 240px var(--radius) var(--radius)}
.hero-photo figcaption,.tag{position:absolute;left:-.6rem;bottom:1.4rem;background:var(--schirm);color:var(--tinte);font:700 .9rem/1.3 var(--text);padding:.55rem .85rem;border-radius:10px;max-width:17rem;transform:rotate(-3deg);box-shadow:3px 3px 0 var(--tinte)}
@media (max-width:600px){.hero-photo figcaption{left:.6rem}}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));gap:1rem 2rem;padding:1.4rem 0 var(--space-m);border-top:1px solid rgb(255 255 255 / .22);font-size:.95rem}
.facts strong{display:block;font:800 var(--step-2)/1 var(--display);color:var(--schirm);margin-bottom:.25rem;letter-spacing:-.02em}

/* Abschnitte */
.section{padding:var(--space-xl) 0}
.section.tight{padding-top:0}
.on-dark{background:var(--donau);color:var(--papier)}
.on-sun{background:var(--schirm);color:var(--tinte)}
h2{font-weight:300;font-size:var(--step-4);max-width:19ch;margin-bottom:var(--space-m)}
h2 b{font-weight:800}
.intro{font-size:var(--step-1);max-width:46ch;line-height:1.5}

/* Signature: Route */
.route{position:relative;padding-left:clamp(2.6rem,6vw,5rem)}
.route::before{content:"";position:absolute;left:clamp(1rem,2.6vw,2.2rem);top:.6rem;bottom:.6rem;border-left:3px dashed var(--donau-2);opacity:.55}
.on-dark .route::before{border-color:var(--schirm)}
.stop{position:relative;padding-bottom:var(--space-l)}
.stop:last-child{padding-bottom:0}
.stop::before{content:"";position:absolute;left:calc(-1 * clamp(2.6rem,6vw,5rem) + clamp(1rem,2.6vw,2.2rem) - 11px);top:.35rem;width:22px;height:22px;border-radius:50%;background:var(--schirm);border:3px solid var(--tinte);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.stop.is-here::before{transform:scale(1.35)}
.stop h3{font-weight:800;font-size:var(--step-2);margin-bottom:.4rem}
.stop p{max-width:58ch;margin:0;color:var(--stein)}
.on-dark .stop p{color:rgb(245 244 239 / .82)}
.stop .when{font:700 var(--step--1)/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--donau-2);display:block;margin-bottom:.35rem}
.on-dark .stop .when{color:var(--schirm)}

/* Zwei Ebenen */
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr));border:2px solid var(--tinte);border-radius:var(--radius);overflow:clip;background:#fff}
.level{padding:var(--space-m) var(--space-m) var(--space-l)}
.level+.level{background:var(--schirm)}
.level h3{font-weight:800;font-size:var(--step-3);margin-bottom:1rem}
.level ul{margin:0;padding:0;list-style:none}
.level li{padding:.55rem 0 .55rem 1.6rem;border-top:1px solid rgb(17 32 30 / .15);position:relative}
.level li::before{content:"";position:absolute;left:0;top:1.05rem;width:.7rem;height:.7rem;border-radius:50%;border:2px solid var(--tinte)}

/* Stationen (Projekte) */
.stations{display:grid;gap:var(--space-xl)}
.station{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(25rem,100%),1fr));gap:var(--space-l);align-items:center}
@media (min-width:860px){.station:nth-child(even) .station-media{order:2}}
.station-media{position:relative;margin:0}
.station-media>img,.station-media>a>img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.pin{position:absolute;top:-1rem;left:1.1rem;z-index:2;background:var(--tinte);color:var(--papier);font:700 .82rem/1 var(--text);padding:.55rem .85rem;border-radius:999px}
.pin i{font-style:normal;color:var(--schirm)}
.station h3{font-weight:800;font-size:var(--step-3);margin:.2rem 0 .8rem}
.station h3 a{text-decoration:none}
.station h3 a:hover{text-decoration:underline;text-decoration-color:var(--schirm);text-decoration-thickness:4px}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 1.4rem;padding:0;list-style:none}
.chips li{border:1.5px solid currentColor;border-radius:999px;padding:.25rem .75rem;font-size:.86rem;font-weight:700}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.5rem}
.thumbs img{aspect-ratio:1;object-fit:cover;border-radius:10px;width:100%}
.more{font-weight:700}

/* Typografische Karten statt Fotos (Kreuzfahrt, Weinerlebnis, München) */
.card-type{border-radius:var(--radius);aspect-ratio:3/2;padding:var(--space-m);display:flex;flex-direction:column;justify-content:space-between;background:var(--donau);color:var(--papier);position:relative;overflow:clip}
.card-type .big{font:800 var(--step-4)/.9 var(--display);letter-spacing:-.04em}
.card-type .big span{color:var(--schirm)}
.card-type .small{font:700 .85rem/1.4 var(--text);letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.card-type.sun{background:var(--schirm);color:var(--tinte)}
.card-type.sun .big span{color:var(--donau-2)}
.card-type.wave::after{content:"";position:absolute;inset:auto -10% -30% -10%;height:55%;background:repeating-radial-gradient(circle at 50% 120%,transparent 0 22px,rgb(255 200 61 / .22) 22px 25px)}
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(10rem,100%),1fr));gap:.7rem;aspect-ratio:auto}
.note{hyphens:auto;background:#fff;border:2px solid var(--tinte);padding:.8rem .9rem;font:700 .98rem/1.3 var(--text);border-radius:6px;box-shadow:3px 3px 0 var(--tinte)}
.note:nth-child(3n+1){transform:rotate(-1.5deg);background:var(--schirm)}
.note:nth-child(3n+2){transform:rotate(1deg)}

/* Video: erst nach Klick laden (youtube-nocookie) */
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:clip;background:var(--tinte);border:0;padding:0;cursor:pointer;color:#fff}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:opacity .2s}
.yt:hover img{opacity:1}
.yt .play{position:absolute;inset:auto auto 1rem 1rem;display:flex;align-items:center;gap:.6rem;background:var(--schirm);color:var(--tinte);font:700 .95rem/1 var(--text);padding:.7rem 1rem;border-radius:999px;border:2px solid var(--tinte)}
.yt .play svg{width:18px;height:18px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));gap:1rem}
.yt-grid figure{margin:0}
.yt-grid figcaption{font-weight:700;margin-top:.5rem}
.yt-note{font-size:.85rem;color:var(--stein);margin-top:.6rem}

/* Fallstudie */
.case-hero{background:var(--donau);color:var(--papier)}
.case-hero .wrap{padding:var(--space-l) 0}
.crumbs{font-size:.9rem;margin-bottom:1.2rem;display:flex;gap:.4rem;flex-wrap:wrap}
.crumbs a{color:var(--schirm)}
.case-hero h1{font-weight:300;font-size:var(--step-4);max-width:20ch;letter-spacing:-.04em}
.case-hero h1 b{font-weight:800;color:var(--schirm)}
.case-hero .lead{max-width:52ch}
.case-hero .chips{color:var(--papier)}
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:.7rem}
.gallery figure{margin:0;position:relative;grid-column:span 4}
.gallery figure:first-child{grid-column:span 8;grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:12px;aspect-ratio:4/3}
.gallery figure:first-child img{aspect-ratio:auto}
.gallery figcaption{position:absolute;left:.6rem;bottom:.6rem;background:var(--papier);font:700 .78rem/1.25 var(--text);padding:.3rem .55rem;border-radius:6px;max-width:calc(100% - 1.2rem)}
@media (max-width:700px){.gallery figure,.gallery figure:first-child{grid-column:1/-1;grid-row:auto}.gallery figure:first-child img{aspect-ratio:4/3}}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));gap:var(--space-l)}
.prose{max-width:66ch}
.prose h2{font-size:var(--step-3);margin:var(--space-l) 0 1rem}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.2rem}
.prose li{margin:.35rem 0}
.check{list-style:none;padding:0;margin:0}
.check li{padding:.6rem 0 .6rem 2rem;border-top:1px solid var(--linie);position:relative}
.check li::before{content:"";position:absolute;left:.2rem;top:.85rem;width:.9rem;height:.5rem;border-left:3px solid var(--donau-2);border-bottom:3px solid var(--donau-2);transform:rotate(-45deg)}
blockquote.voice{margin:0;font:300 var(--step-3)/1.1 var(--display);letter-spacing:-.02em}
blockquote.voice b{font-weight:800;color:var(--schirm)}
blockquote.voice cite{display:block;font:600 var(--step--1)/1.4 var(--text);font-style:normal;margin-top:1rem;opacity:.85}

/* Person */
.person{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr));gap:var(--space-l);align-items:center}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius) var(--radius) 240px 240px}

/* Leistungen */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));gap:0;border-top:2px solid var(--tinte)}
.service{padding:var(--space-m) var(--space-m) var(--space-m) 0;border-bottom:1px solid var(--linie)}
.service h3{font-weight:800;font-size:var(--step-2);margin-bottom:.5rem}
.service p{margin:0;color:var(--stein)}

/* Formular */
.form{display:grid;gap:1rem;max-width:44rem}
.form .row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:1rem}
.form label{display:grid;gap:.35rem;font-weight:700}
.form input,.form textarea{font:inherit;padding:.8rem .9rem;border:2px solid var(--tinte);border-radius:10px;background:#fff;color:var(--tinte);width:100%}
.form textarea{min-height:10rem;resize:vertical}
.form .hp{position:absolute;left:-9999px}
.form .status{font-weight:700;min-height:1.5em}
.form small{font-weight:400;color:var(--stein)}

/* Fuß */
.site-foot{background:var(--tinte);color:var(--papier);padding:var(--space-l) 0 var(--space-m)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:var(--space-m)}
.site-foot h2{font-size:var(--step-1);font-weight:800;margin:0 0 .6rem;max-width:none}
.site-foot a{color:var(--papier)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:.3rem 0}
.motto{font:300 var(--step-2)/1.1 var(--display);color:var(--schirm);margin:0 0 var(--space-m)}
.legal{border-top:1px solid rgb(255 255 255 / .18);margin-top:var(--space-m);padding-top:1rem;font-size:.88rem;display:flex;gap:.5rem 1.4rem;flex-wrap:wrap;opacity:.85}

/* Bewegung: nur mit JS und ohne reduzierte Bewegung */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .js .reveal.is-in{opacity:1;transform:none}
  .js .route::before{clip-path:inset(0 0 var(--route-left,100%) 0);transition:clip-path .2s linear}
}