/* Dr. Amtmann - Swiss Design. Strenges Raster, Plakatschrift, ein Signalrot, ein Lederkoffer als einziger warmer Gegenstand. */
:root{
  --papier:#F2F1EC;--tinte:#0E0E0E;--leise:#5B5A55;--rot:#0A5BA8;--linie:rgba(14,14,14,.18);
  --sans:'Hanken Grotesk',Helvetica,Arial,sans-serif;
  --rand:clamp(16px,3.2vw,56px);--kurve:cubic-bezier(.2,.7,.1,1)
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{background:var(--papier);color:var(--tinte);font:400 clamp(16px,.35vw + 12px,19px)/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2{font-weight:800;letter-spacing:-.045em;line-height:.9}
h2{font-size:clamp(46px,7vw,140px);margin-bottom:clamp(24px,4vh,44px)}
.rot{color:var(--rot)}
.nr{font:700 13px/1 var(--sans);letter-spacing:.04em;margin-bottom:22px;padding-top:12px;border-top:2px solid var(--tinte);display:inline-block;min-width:220px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sprung{position:absolute;left:-999px;top:8px;z-index:200;padding:10px 16px;background:#fff}
.sprung:focus{left:8px}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
html.js.wow [data-auf]{opacity:0;transform:translateY(30px)}

/* Knoepfe */
.knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;background:var(--rot);color:#fff;font:700 15px var(--sans);text-decoration:none;white-space:nowrap;transition:background .2s}
.knopf:hover{background:var(--tinte)}
.knopf--rand{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 2px var(--tinte)}
.knopf--rand:hover{background:var(--tinte);color:var(--papier)}
.knopf--klein{min-height:40px;padding:0 18px;font-size:14px}

/* Kopf */
.kopf{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px var(--rand);background:rgba(242,241,236,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:2px solid var(--tinte)}
.kopf__marke{display:flex;align-items:center;gap:10px;font:800 20px var(--sans);letter-spacing:-.03em;text-decoration:none}
.kopf__marke i{width:14px;height:14px;background:var(--rot)}
.kopf__links{display:flex;gap:clamp(16px,2.4vw,36px);font-weight:700;font-size:14px;margin-left:auto;margin-right:20px}
.kopf__links a{text-decoration:none}
.kopf__links a:hover{color:var(--rot)}

/* Status */
.status{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14px}
.status i{width:10px;height:10px;background:#B9B6AE}
.status[data-offen="ja"] i{background:#1FA34A}

/* 3D */
.koffer{position:fixed;inset:0;width:100vw;height:100vh;z-index:30;pointer-events:none;opacity:0;display:none}
html.drei-d .koffer{display:block}

/* I Plakat */
.held{position:relative;min-height:100svh;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr auto;column-gap:clamp(10px,1.4vw,24px);padding:calc(70px + clamp(20px,4vh,50px)) var(--rand) clamp(26px,5vh,50px)}
.raster{position:absolute;inset:0 var(--rand);display:grid;grid-template-columns:repeat(4,1fr);pointer-events:none;z-index:-1}
.raster i{border-left:1px solid var(--linie)}
.raster i:last-child{border-right:1px solid var(--linie)}
.held__nr{grid-column:1/-1;font:800 13px var(--sans);color:var(--rot)}
.held__wort{grid-column:1/9;align-self:center;font-size:clamp(96px,17vw,330px);line-height:.8;letter-spacing:-.06em}
.held__wort span{display:block}
.held__wort b{color:var(--rot)}
.held__daten{grid-column:1/9;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;font-size:15px;border-top:2px solid var(--tinte);padding-top:14px;margin-top:20px}
.held__aktion{grid-column:9/13;align-self:end;display:flex;flex-direction:column;gap:14px;margin-top:20px}

/* II Termin */
.termin{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(10px,1.4vw,24px);padding:clamp(80px,14vh,170px) var(--rand);border-top:2px solid var(--tinte)}
.termin .nr,.termin h2,.termin__text{grid-column:6/13}
.termin__text{max-width:30em;font-size:clamp(18px,1.5vw,24px)}

/* III Besuch */
.besuch{position:relative;background:var(--tinte);color:var(--papier)}
html.wow .besuch{height:300svh}
.besuch__buehne{position:relative;min-height:100svh;padding:calc(70px + clamp(20px,4vh,50px)) var(--rand) var(--rand);overflow:hidden}
html.wow .besuch__buehne{position:sticky;top:0;height:100svh}
.besuch .nr{border-color:var(--papier)}
.besuch h2{max-width:9em;position:relative;z-index:2}
.route{position:absolute;left:var(--rand);right:var(--rand);top:34%;bottom:12%;width:calc(100% - 2 * var(--rand));height:54%}
.route path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.route__grund{stroke:rgba(242,241,236,.18);stroke-width:2;stroke-dasharray:2 10}
.route__linie{stroke:var(--rot);stroke-width:6}
.route__punkt{fill:var(--papier)}
.route__punkt--ziel{fill:var(--rot)}
.besuch__start,.besuch__ziel{position:absolute;font:700 14px var(--sans);letter-spacing:.04em;text-transform:uppercase}
.besuch__start{left:var(--rand);bottom:calc(12% + 2%);}
.besuch__ziel{right:var(--rand);top:calc(34% - 40px);color:var(--rot)}
.besuch__text{position:absolute;right:var(--rand);bottom:var(--rand);max-width:26em;font-size:clamp(16px,1.3vw,20px);color:rgba(242,241,236,.8)}
html:not(.wow) .route__linie{stroke-dasharray:none}

/* IV Leistungen */
.leistungen{padding:clamp(80px,14vh,170px) var(--rand)}
.liste{list-style:none;border-top:2px solid var(--tinte);max-width:1100px}
.liste li{display:grid;grid-template-columns:90px 1.2fr 1fr;align-items:baseline;gap:16px;padding:clamp(18px,2.6vh,28px) 0;border-bottom:1px solid var(--linie);transition:padding .3s var(--kurve)}
.liste li:hover{padding-left:16px}
.liste li:hover span{color:var(--rot)}
.liste span{font:700 14px var(--sans)}
.liste b{font:800 clamp(24px,2.6vw,46px)/1 var(--sans);letter-spacing:-.035em}
.liste small{font-size:15px;color:var(--leise)}

/* V Zeiten */
.zeiten{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(10px,1.4vw,24px);padding:clamp(70px,12vh,150px) var(--rand);border-top:2px solid var(--tinte)}
.zeiten__kopf{grid-column:6/13}
.tabelle{grid-column:6/13;border-collapse:collapse;width:100%;margin-top:20px;font-size:clamp(16px,1.4vw,22px)}
.tabelle th,.tabelle td{text-align:left;padding:16px 10px 16px 0;border-bottom:1px solid var(--linie)}
.tabelle thead th{font-size:13px;font-weight:700;border-bottom:2px solid var(--tinte)}
.tabelle tbody th{font-weight:800}
.tabelle tr.zu td{color:var(--leise)}
.tabelle tr.abend td:last-child{color:var(--rot);font-weight:800}
.tabelle tr[data-heute="ja"]{background:var(--tinte);color:var(--papier)}
.tabelle tr[data-heute="ja"] th{padding-left:10px}
.tabelle tr[data-heute="ja"] th::after{content:" — heute";color:var(--rot)}

/* VI Kontakt */
.kontakt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);padding:clamp(70px,12vh,150px) var(--rand);border-top:2px solid var(--tinte)}
.kontakt h2{font-size:clamp(42px,5vw,96px);margin-bottom:12px}
.kontakt__tel{font:800 clamp(34px,3.6vw,64px)/1 var(--sans);letter-spacing:-.04em;margin:18px 0 24px}
.kontakt__tel a{text-decoration:none}
.kontakt__tel a:hover{color:var(--rot)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.chips button{min-height:44px;padding:0 16px;box-shadow:inset 0 0 0 2px var(--tinte);font-weight:700;font-size:15px;transition:background .2s,color .2s}
.chips button:hover{background:var(--rot);color:#fff;box-shadow:none}
.notruf{list-style:none;border-top:2px solid var(--tinte)}
.notruf li{padding:12px 0;border-bottom:1px solid var(--linie);font-size:15px}
.notruf b{font-weight:800;font-size:22px;margin-right:12px;color:var(--rot)}

/* Fuss */
.fuss{background:var(--tinte);color:var(--papier);padding:clamp(40px,8vh,90px) var(--rand) 22px;overflow:hidden}
.fuss__wort{font:800 clamp(56px,12.5vw,260px)/.78 var(--sans);letter-spacing:-.065em;margin:0 0 clamp(30px,6vh,60px) -.05em}
.fuss__wort b{color:var(--rot)}
.fuss__zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:rgba(242,241,236,.65);border-top:1px solid rgba(242,241,236,.25);padding-top:16px}

/* Chat */
[data-bot]{position:fixed;z-index:60;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}
.bot__auf{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 22px 0 16px;background:var(--rot);color:#fff;font:700 15px var(--sans);transition:opacity .4s,transform .4s var(--kurve)}
.bot__auf i{width:10px;height:10px;background:#fff}
html.im-held .bot__auf{opacity:0;transform:translateY(130%);pointer-events:none}
[data-bot][data-offen="ja"] .bot__auf{display:none}
.bot__fenster{position:absolute;right:0;bottom:0;width:min(400px,calc(100vw - 36px));height:min(620px,calc(100svh - 36px));display:flex;flex-direction:column;overflow:hidden;background:var(--papier);border:2px solid var(--tinte)}
.bot__fenster[hidden]{display:none!important}
.bot__kopf{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--tinte);color:var(--papier)}
.bot__wer{display:flex;flex-direction:column;gap:2px}
.bot__wer b{font-weight:800;font-size:18px;letter-spacing:-.02em}
.bot__wer small{font-size:12px;opacity:.7}
.bot__zu{width:34px;height:34px;background:var(--rot);color:#fff;font-size:20px;line-height:1}
.bot__lauf{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:8px}
.bot__blase{max-width:84%;padding:10px 14px;font-size:15px;line-height:1.45}
.bot__blase--bot{align-self:flex-start;background:#fff;border-left:3px solid var(--tinte)}
.bot__blase--ich{align-self:flex-end;background:var(--tinte);color:var(--papier)}
.bot__blase a{color:inherit}
.bot__blase small{display:block;margin-top:8px;color:var(--leise)}
.bot__zettel{display:block;margin:8px 0 4px;padding:12px 14px;background:#fff;border-left:4px solid var(--rot);line-height:1.6}
.bot__punkte{display:inline-flex;gap:5px}
.bot__punkte i{width:6px;height:6px;background:var(--rot);animation:tippen 1s infinite ease-in-out}
.bot__punkte i:nth-child(2){animation-delay:.15s}.bot__punkte i:nth-child(3){animation-delay:.3s}
@keyframes tippen{0%,100%{opacity:.3}50%{opacity:1}}
.bot__chips{display:flex;flex-wrap:wrap;gap:8px}
.bot__chips button{padding:8px 13px;background:#fff;box-shadow:inset 0 0 0 2px var(--tinte);font-weight:700;font-size:14px}
.bot__chips button:hover{background:var(--rot);color:#fff;box-shadow:none}
.bot__fuss{display:flex;gap:8px;padding:10px 12px;border-top:2px solid var(--tinte)}
.bot__eingabe{flex:1;min-width:0;height:44px;padding:0 14px;border:2px solid var(--tinte);background:#fff;font:400 16px var(--sans)}
.bot__senden{width:44px;height:44px;background:var(--rot);color:#fff;font-size:18px}
.bot__hinweis{margin:0;padding:0 16px 12px;font-size:12px;color:var(--leise)}

/* Unterseiten */
body > main:not(#inhalt){max-width:780px;margin:0 auto;padding:130px var(--rand) 80px}
body > main:not(#inhalt) h1{font-size:clamp(52px,8vw,110px);margin-bottom:30px}
body > main:not(#inhalt) h2{font-size:28px;margin:30px 0 8px}
body > main:not(#inhalt) p{margin-bottom:14px}

@media (max-width:860px){
  .kopf__links{display:none}
  .held{grid-template-columns:1fr;row-gap:0}
  .held__wort,.held__daten,.held__aktion{grid-column:1/-1}
  .held__wort{font-size:clamp(82px,27vw,170px);margin-top:10svh}
  .held__daten{grid-template-columns:1fr 1fr}
  .termin,.zeiten{grid-template-columns:1fr}
  .termin .nr,.termin h2,.termin__text,.zeiten__kopf,.tabelle{grid-column:1/-1}
  .liste li{grid-template-columns:44px 1fr;row-gap:4px}
  .liste small{grid-column:2}
  .kontakt{grid-template-columns:1fr}
  .besuch__text{left:var(--rand);right:var(--rand)}
  .route{top:40%;height:36%}
  .besuch__ziel{top:calc(40% - 34px)}
  .bot__fenster{position:fixed;inset:0;width:100%;height:100dvh;border:0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}