/* Formatierung für Unterseiten (Ortsseiten, Leistungsseiten).
   Bewusst eigenständig: Die Startseite bringt ihre Formatierung inline mit,
   und daran wird hier nichts angefasst. Gemeinsam sind nur die Farbwerte,
   die Schriften und die Bausteine, die auf jeder Seite gleich aussehen
   müssen: Kopfzeile, Knöpfe, Fußzeile, Kontaktblock.

   Unterseiten kommen ohne kino.js aus. Alles, was hier animiert, tut das
   über CSS allein und ist auch ohne Javascript vollständig sichtbar. */

:root{
  --grund:#04090B; --flaeche:#0A171C; --schrift:#EAF4F5; --leise:rgba(234,244,245,.72);
  --tuerkis:#2EABC5; --tuerkis-hell:#8FD8E7; --gruen:#56E39F; --bernstein:#D89A4E;
  --rand:rgba(255,255,255,.12); --seite:clamp(20px, 6vw, 88px);
  --display:"Montserrat", system-ui, sans-serif; --text:"Source Sans 3", system-ui, sans-serif;
  --weich:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--schrift);font-family:var(--text);
  font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* height:auto ist Pflicht, sobald ein Bild width und height als Attribut
   mitbringt: Ohne diese Zeile bleibt die Höhe auf dem Attributwert stehen,
   während max-width die Breite schrumpft, und das Bild wird gestaucht. */
img{max-width:100%;height:auto;display:block}
a{color:var(--tuerkis);text-decoration:none}
a:hover{color:var(--tuerkis-hell)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.035em;margin:0;text-wrap:balance}
h2{font-size:clamp(28px,3.8vw,50px);line-height:1.08}
h3{font-size:clamp(20px,1.9vw,24px);font-weight:700;letter-spacing:-.02em}
p{margin:0}
section{padding:clamp(56px,7vw,104px) var(--seite)}

.marke{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--tuerkis);
  display:flex;align-items:center;gap:14px}
.marke::after{content:"";height:1px;flex:1;max-width:120px;
  background:linear-gradient(90deg,var(--tuerkis),transparent)}
.kleinmarke{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:rgba(234,244,245,.45)}

/* Knöpfe, gleich wie auf der Startseite */
.knopf{position:relative;display:inline-block;background:var(--tuerkis);color:#05191E;
  font-family:var(--display);font-weight:700;font-size:clamp(16px,1.4vw,19px);
  padding:clamp(15px,1.5vw,21px) clamp(26px,3vw,44px);border-radius:999px;
  box-shadow:0 24px 64px rgba(46,171,197,.4);border:0;cursor:pointer;overflow:hidden;
  isolation:isolate;transition:transform .3s var(--weich), box-shadow .3s ease}
.knopf::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%)}
.knopf:hover::after{transform:translateX(120%);transition:transform .8s var(--weich)}
.knopf:hover{color:#05191E;box-shadow:0 30px 74px rgba(46,171,197,.58)}
.knopf.leise{background:rgba(255,255,255,.07);color:var(--schrift);
  border:1px solid rgba(46,171,197,.5);box-shadow:none}
.knopf.leise:hover{color:var(--schrift);border-color:var(--tuerkis)}
.chip{border:1px solid var(--rand);border-radius:999px;padding:10px 20px;font-size:15px;
  color:rgba(234,244,245,.82);transition:border-color .3s ease,color .3s ease,transform .3s var(--weich)}
.chip:hover{border-color:rgba(46,171,197,.6);color:var(--schrift);transform:translateY(-3px)}

/* Vignette und Filmkorn, damit die Unterseite nicht flacher wirkt als die
   Startseite. Das Korn ist größer als das Fenster, sonst bliebe beim
   Verschieben an einer Kante ein Streifen ohne Korn stehen. */
.vignette{position:fixed;inset:0;pointer-events:none;z-index:94;
  background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(0,0,0,.55) 100%)}
.korn{position:fixed;inset:-10%;width:120%;height:120%;pointer-events:none;z-index:95;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:korn 1.2s steps(6) infinite}
@keyframes korn{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(-3%,2%,0)}
  50%{transform:translate3d(2%,-3%,0)}75%{transform:translate3d(-2%,-2%,0)}100%{transform:translate3d(3%,1%,0)}}

/* Kopfzeile, gleich wie auf der Startseite */
.kopf{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:14px var(--seite);background:var(--grund);
  border-bottom:1px solid rgba(255,255,255,.08)}
.kopf img{height:clamp(46px,4.8vw,74px);width:auto}
.kopf nav{display:flex;align-items:center;gap:clamp(14px,2vw,32px);font-size:16px;
  color:rgba(234,244,245,.84)}
.kopf nav a{color:inherit;position:relative}
.kopf nav a:not(.knopf)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--tuerkis);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--weich)}
.kopf nav a:not(.knopf):hover::after{transform:scaleX(1)}
.kopf nav a:hover{color:var(--tuerkis-hell)}
.kopf .knopf{box-shadow:none;padding:12px 22px;font-size:16px;color:#000}
.kopf .knopf:hover{color:#000}
@media (max-width:860px){.kopf nav a:not(.knopf){display:none}}

/* Aufmacher der Unterseite: flacher als auf der Startseite, weil hier der
   Text die Hauptsache ist und nicht der Auftritt. */
.kopfbild{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(420px,62svh,660px);padding:170px var(--seite) clamp(48px,6vw,84px);overflow:hidden}
.kopfbild .bild{position:absolute;inset:0;overflow:hidden;z-index:-2}
.kopfbild .bild img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform:scale(1.04)}
.kopfbild::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(4,9,11,.96) 0%,rgba(4,9,11,.9) 38%,rgba(4,9,11,.42) 72%,rgba(4,9,11,.18) 100%)}
.kopfbild::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,9,11,.72) 0%,transparent 26%,transparent 58%,rgba(4,9,11,.97) 100%)}
@media (max-width:760px){
  .kopfbild::before{background:linear-gradient(180deg,rgba(4,9,11,.82),rgba(4,9,11,.6) 40%,rgba(4,9,11,.96))}
}
.kopfbild h1{font-size:clamp(34px,5.6vw,72px);line-height:1.02;letter-spacing:-.045em;
  margin:22px 0 0;max-width:15ch;text-shadow:0 20px 60px rgba(0,0,0,.6)}
.kopfbild h1 em{font-style:normal;color:var(--tuerkis)}
.kopfbild p{margin:24px 0 0;font-size:clamp(17px,1.6vw,21px);color:rgba(234,244,245,.84);max-width:60ch}
.kopfbild .tasten{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:34px}

/* Brotkrumen: zeigen dem Leser und der Suchmaschine, wo die Seite hängt */
.pfad{font-size:14px;color:rgba(234,244,245,.55);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pfad a{color:rgba(234,244,245,.75)}
.pfad a:hover{color:var(--tuerkis-hell)}
.pfad span[aria-hidden]{color:rgba(234,244,245,.3)}

/* Fließtext: eine Spalte in lesbarer Breite, keine Textwüste über die
   ganze Fensterbreite. */
.text-spalte{max-width:74ch}
.text-spalte h2{margin-top:0}
.text-spalte p{margin-top:20px;color:var(--leise);font-size:clamp(17px,1.35vw,19px)}
.text-spalte p:first-of-type{margin-top:24px}
.text-spalte h3{margin-top:38px}

.abschnitt + .abschnitt{padding-top:0}
.abschnitt{position:relative}
.abschnitt.getrennt{border-top:1px solid rgba(255,255,255,.08)}

/* Zweispaltig, wo ein Abschnitt eine Liste danebenstellt */
.zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(28px,4vw,64px);align-items:start}

/* Aufzählung mit Haken, gleiche Anmutung wie die Preisliste der Startseite */
ul.haken{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px;
  font-size:clamp(16px,1.3vw,18px);color:var(--leise)}
ul.haken li{position:relative;padding-left:34px}
ul.haken li::before{content:"";position:absolute;left:0;top:.42em;width:18px;height:10px;
  border-left:2px solid var(--gruen);border-bottom:2px solid var(--gruen);
  transform:rotate(-45deg);border-radius:1px}

/* Kasten für einen Hinweis, der nicht im Fließtext untergehen soll */
.kasten{border:1px solid rgba(46,171,197,.4);border-radius:24px;
  padding:clamp(24px,2.8vw,40px);background:linear-gradient(150deg,rgba(46,171,197,.15),rgba(46,171,197,.03));
  margin-top:clamp(32px,4vw,52px)}
.kasten h3{margin-bottom:12px}
.kasten p{color:var(--schrift);margin-top:12px}

/* Der Einstieg als Zeitleiste, gleiche Anmutung wie auf der Startseite:
   eine Schiene, drei Knoten. Die Startseite schaltet sie per Javascript an,
   hier gibt es keins. Deshalb ist der angeschaltete Zustand der Normalfall,
   und die Bewegung kommt nur dort dazu, wo der Browser am Scrollstand
   animieren kann. So steht die Leiste in jedem Fall vollständig da. */
.schiene{position:relative;margin-top:clamp(36px,4.4vw,64px)}
.gleis{position:absolute;left:22px;right:22px;top:21px;height:2px;
  background:rgba(255,255,255,.14);overflow:hidden}
.gleis i{display:block;height:100%;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--tuerkis),var(--gruen))}
.schiene .schritte{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);position:relative}
.schiene .schritte li{display:flex;flex-direction:column;gap:12px}
.knoten{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid var(--tuerkis);position:relative;z-index:1;
  font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.04em;
  color:var(--tuerkis-hell);box-shadow:0 0 0 6px rgba(46,171,197,.1);
  background:linear-gradient(rgba(46,171,197,.16),rgba(46,171,197,.16)),var(--grund)}
.schiene .schritte h3{margin:6px 0 0}
.schiene .schritte p{color:var(--leise);font-size:17px}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .gleis i{animation:gleisfuellen 1s linear both;animation-timeline:view();
      animation-range:entry 10% entry 80%}
    .knoten{animation:knotenan .4s linear both;animation-timeline:view();
      animation-range:entry 20% entry 60%}
    .schiene li:nth-child(2) .knoten{animation-range:entry 35% entry 70%}
    .schiene li:nth-child(3) .knoten{animation-range:entry 50% entry 85%}
  }
}
@keyframes gleisfuellen{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes knotenan{
  from{background:var(--grund);border-color:rgba(255,255,255,.18);
    color:rgba(234,244,245,.45);box-shadow:0 0 0 6px rgba(46,171,197,0)}
  to{background:linear-gradient(rgba(46,171,197,.16),rgba(46,171,197,.16)),var(--grund);
    border-color:var(--tuerkis);color:var(--tuerkis-hell);box-shadow:0 0 0 6px rgba(46,171,197,.1)}
}
@media (max-width:760px){
  .gleis{left:21px;right:auto;top:10px;bottom:10px;width:2px;height:auto}
  .gleis i{width:100%;height:100%;transform-origin:50% 0}
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      .gleis i{animation-name:gleisfuellen-hoch}
    }
  }
  .schiene .schritte{grid-template-columns:1fr;gap:30px}
  .schiene .schritte li{padding-left:64px;position:relative}
  .knoten{position:absolute;left:0;top:0}
}
@keyframes gleisfuellen-hoch{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Einzugsgebiet */
.orte{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,40px)}

/* Karte des Kreises. Sie ist als SVG in der Seite gezeichnet, aus den
   Umrissdaten von OpenStreetMap. Zur Laufzeit wird nichts nachgeladen und
   kein fremder Server angefragt, anders als bei einer eingebetteten Karte. */
.zwei.mitkarte{grid-template-columns:minmax(320px,1fr) minmax(330px,1fr);align-items:start}
.kartenfeld{margin:0}

/* Die Karte steht neben dem längsten Textstück der Seite und läuft beim
   Scrollen mit, damit die rechte Seite nicht leer bleibt. */
.obenmitkarte{padding-top:clamp(32px,3.6vw,56px)}
.obenmitkarte .kartenfeld{position:sticky;top:clamp(96px,11vh,124px)}
/* Der erste Absatz schließt direkt an den Aufmacher an, ohne Vorlauf. */
.obenmitkarte .text-spalte>*:first-child{margin-top:0}
/* Ein neues Thema in derselben Spalte braucht eine sichtbare Zäsur,
   sonst klebt die Marke am letzten Absatz davor. */
.text-spalte>.marke:not(:first-child){margin-top:clamp(44px,4.6vw,76px)}

/* Auf dem Handy steht die Karte nur im Weg: Sie liegt dort unter dem Text
   statt daneben, und dieselben Orte stehen ohnehin im Text und als
   Ortsnamen weiter unten. Deshalb fällt sie weg, sobald die zweite Spalte
   nicht mehr passt. Der Hinweis auf die Kartenquelle geht mit, er wird
   nur gebraucht, solange die Karte zu sehen ist. */
@media (max-width:900px){
  .zwei.mitkarte{grid-template-columns:1fr}
  .kartenfeld{display:none}
}
.kreiskarte{width:100%;height:auto;display:block;overflow:visible}
.kreiskarte .umriss{fill:rgba(46,171,197,.09);stroke:rgba(46,171,197,.55);
  stroke-width:1.6;stroke-linejoin:round}
.kreiskarte .punkt{fill:var(--tuerkis-hell)}
.kreiskarte .punkt-leise{fill:rgba(234,244,245,.3)}
.kreiskarte .ort{font-family:var(--text);font-size:16px;fill:rgba(234,244,245,.78)}
.kreiskarte .ort.leise{font-size:14px;fill:rgba(234,244,245,.4)}
.kreiskarte .sitz{fill:var(--tuerkis)}
.kreiskarte .sitzring{fill:none;stroke:var(--tuerkis);stroke-width:1.5;opacity:.75;
  transform-box:fill-box;transform-origin:50% 50%;animation:sitzpuls 3.2s ease-out infinite}
.kreiskarte .sitzname{font-family:var(--display);font-weight:800;font-size:22px;
  letter-spacing:-.02em;fill:var(--schrift)}
.kreiskarte .sitzzusatz{font-family:var(--text);font-size:14px;fill:var(--tuerkis-hell)}
@keyframes sitzpuls{
  0%{transform:scale(.72);opacity:.85}
  70%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}
.kartenfeld figcaption{margin-top:18px;font-size:14px;color:rgba(234,244,245,.45);
  line-height:1.5;max-width:46ch}
.kartenfeld figcaption a{color:rgba(234,244,245,.62);text-decoration:underline;
  text-underline-offset:3px}
.kartenfeld figcaption a:hover{color:var(--tuerkis-hell)}

/* Kontakt, gleich wie auf der Startseite */
.kontaktfelder{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(20px,2.6vw,40px);margin-top:clamp(28px,3.4vw,52px)}
.kontaktfeld{display:grid;gap:12px;align-content:start;
  border-top:1px solid rgba(255,255,255,.12);padding-top:20px}
.kontaktfeld .gross{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(19px,1.9vw,25px);color:var(--schrift)}
.kontaktfeld .gross:hover{color:var(--tuerkis-hell)}
.kontaktfeld address{font-style:normal;color:var(--leise);font-size:17px;line-height:1.5}
.kontaktfeld .knopf{justify-self:start}

/* Abschluss mit Handlungsaufforderung */
.abschluss{position:relative;text-align:center;overflow:hidden;padding:clamp(70px,8vw,120px) var(--seite)}
.abschluss .bild{position:absolute;inset:0;z-index:-2;overflow:hidden}
.abschluss .bild img{width:100%;height:100%;object-fit:cover;object-position:40% 60%;opacity:.45}
.abschluss::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 70% at 50% 45%,rgba(4,9,11,.72),rgba(4,9,11,.97))}
.abschluss h2{font-size:clamp(30px,4.4vw,58px);letter-spacing:-.045em}
.abschluss p{margin-top:20px;color:rgba(234,244,245,.8);font-size:clamp(17px,1.6vw,20px)}
.abschluss .tasten{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:34px}

/* Fußzeile, gleich wie auf der Startseite */
.fuss{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;
  padding:40px var(--seite);border-top:1px solid rgba(255,255,255,.08);font-size:15px;
  color:rgba(234,244,245,.5)}
.fuss img{height:46px;width:auto;opacity:.9}
.fuss .links{display:flex;flex-wrap:wrap;gap:22px}
.fuss a{color:rgba(234,244,245,.7)}

/* Auftritt beim Scrollen, rein über CSS. Ohne Unterstützung im Browser
   steht alles ganz normal da, nur ohne Bewegung. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .auf{animation:aufsteigen .8s var(--weich) both;animation-timeline:view();
      animation-range:entry 0% entry 55%}
  }
}
@keyframes aufsteigen{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

:where(a,button):focus-visible{outline:2px solid var(--tuerkis-hell);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .korn{display:none}
  html{scroll-behavior:auto}
}