/* Teil 1 von 3: gemeinsame Grundlage aller CWG-Marken, Quelle _Kern/tokens.css */
/* ============================================================================
   CWG · Gemeinsame Grundlage aller Marken
   Angelegt 24.08.2026.

   Vorher hatte jede Seite ihr eigenes System: Curawel AT und DE teilten sich
   157 CSS-Klassen, Pflegegruppe drei davon, Welmoa vier. Drei Inhaltsbreiten
   (1280, 1220, 1180), drei Sektionsabstaende, drei Schattensaetze, vier
   Knopfgeometrien. Das sah nicht nach einer Familie aus.

   Die Trennlinie ist einfach: alles was Form ist, steht hier und gilt fuer alle.
   Alles was Farbe ist, kommt aus dem Markenblock weiter unten. Umgeschaltet
   wird ueber data-marke am <html>.

   Diese Datei wird von build.py vor die seiteneigene CSS gehaengt, es gibt
   also keinen zusaetzlichen Ladevorgang.
   ============================================================================ */

/* ---------------------------------------------------------------- Schriften
   Seit 06.09.2026 tragen alle vier CWG-Marken die Schriften der Dachmarke:
   Jost fuer Ueberschriften, Inter fuer den Fliesstext. An cwgroup.at gemessen,
   nicht aus einer Notiz abgeschrieben. Die Variable heisst dort noch
   --font-sora, ausgeliefert wird Jost. Emres Entscheidung, weil sie "viel
   schoener und staerker" sind.

   Vorher: ITC Avant Garde Gothic und Neue Haas Unica aus dem Curawel-Kit.
   Zwei Sachen aendern sich dadurch:

   1. Avant Garde gab es nur in einem Schnitt, deshalb standen alle
      Ueberschriften auf 500 und font-synthesis:none musste das Faelschen
      verhindern. Jost hat echte Schnitte von 400 bis 700, Ueberschriften
      stehen jetzt auf 600. font-synthesis:none bleibt trotzdem stehen, es
      verhindert weiterhin erfundene Zwischenschnitte.
   2. Die offene Lizenzfrage A1 ist erledigt. Ob das Curawel-Webfont-Kit
      pflegegruppe.gmbh, welmoa.at und curawel.de abdeckt, war nie geklaert.
      Jost und Inter stehen unter der SIL Open Font License.

   Beides sind variable Schriften, eine Datei je Subset deckt 400 bis 700 ab.
   Latin-ext laedt nur, wenn ein Zeichen daraus vorkommt. Selbst gehostet,
   kein Aufruf bei Google. */
@font-face{font-family:"Jost";src:url("/fonts/jost-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";src:url("/fonts/jost-latin-ext.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url("/fonts/inter-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("/fonts/inter-latin-ext.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* -------------------------------------------------------------- Typografie
     Die Skala kommt von Curawel, weil sie als einzige alle vier Stufen mit
     eigener Zeilenhoehe definiert. */
  --schrift-display:"Jost","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --schrift-text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* Ueberschriftengewicht als Token, damit es nicht in vier Dateien steht. */
  --gewicht-display:600;

  --fs-body:1.0625rem;          /* 17px, war auf drei Seiten schon so */
  --lh-body:1.62;
  --fs-h1:clamp(2.25rem,1.25rem + 3.4vw,4.1rem);   --lh-h1:1.07;
  --fs-h2:clamp(1.75rem,1.15rem + 2.1vw,2.9rem);   --lh-h2:1.12;
  --fs-h3:clamp(1.2rem,1.05rem + .6vw,1.5rem);     --lh-h3:1.25;
  --fs-h4:1.0625rem;                                --lh-h4:1.3;
  --fs-lead:clamp(1.05rem,1rem + .35vw,1.24rem);   --lh-lead:1.58;
  --fs-klein:.9375rem;
  --fs-eyebrow:.75rem;
  --ls-eng:-.015em;             /* h1 und h2 */
  --ls-h3:-.01em;
  --ls-eyebrow:.12em;

  /* ------------------------------------------------------------------ Raster
     1280 war der groesste der drei Werte und traegt die breiten Tabellen
     der Standortseiten. */
  --wrap:1280px;
  --wrap-schmal:800px;
  --gut:clamp(1.25rem,4vw,2.5rem);   /* 20 bis 40px statt fester 24px */
  /* Emre am 06.09.2026: "es ist so viel Freiflaeche". Nachgerechnet: auf
     einem 2000er Schirm waren das 120px oben und 120px unten, also 240
     Pixel Nichts zwischen zwei Abschnitten. Jetzt 52 bis 92, macht 104
     bis 184. Luftig bleibt es, leer nicht mehr. */
  --sec:clamp(3.25rem,5vw,5.75rem);  /* 52 bis 92px */
  --sprung:96px;                     /* Abstand fuer Sprungmarken unter dem Kopf */

  --gap-1:.5rem;  --gap-2:.75rem; --gap-3:1rem;
  --gap-4:1.25rem; --gap-5:1.5rem; --gap-6:2rem;
  --gap-raster:clamp(1rem,2vw,1.5rem);

  /* ------------------------------------------------------------------ Radien */
  --r-s:14px;    /* war ueberall schon 14 */
  --r-m:20px;
  --r-l:28px;
  --r-voll:999px;

  /* ---------------------------------------------------------------- Bewegung */
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-pop:cubic-bezier(.34,1.4,.64,1);   /* nur fuer die Hover-Anhebung */
  --dur-flink:.18s; --dur:.25s; --dur-ruhig:.55s;
  --lift:-3px;                              /* eine Anhebung statt 0, 1 und 3px */

  /* ----------------------------------------------------------------- Knoepfe */
  --btn-h:52px; --btn-h-klein:44px;
  --btn-pad:15px 28px; --btn-pad-klein:11px 20px;
  --btn-radius:var(--r-voll);
  --btn-gewicht:700;
  --btn-rand:2px;

  /* ---------------------------------------------------------------- Schatten
     Der Ton kommt aus der Marke, damit ein Schatten unter einer tuerkisen
     Karte nicht blaeulich wirkt. */
  --sh-1:0 2px 8px   rgb(var(--schatten-ton) / .06);
  --sh-2:0 14px 36px rgb(var(--schatten-ton) / .11);
  --sh-3:0 30px 70px rgb(var(--schatten-ton) / .18);
}

/* ============================================================================
   Markenfarben
   Alle Werte aus den echten Logo-Dateien gemessen, nicht geschaetzt.
   Jede Marke fuellt dieselben Steckplaetze:

     --marke        Primaerfarbe, traegt weisse Schrift
     --marke-tief   dunklere Stufe fuer kleine Schrift und Hover
     --marke-hell   aufgehellt, reine Flaeche, nie Text auf Weiss
     --akzent       Akzentfarbe als Flaeche (Logofarbe, oft zu hell fuer Text)
     --akzent-voll  derselbe Akzent abgedunkelt, traegt weisse Schrift (>= 4,5:1)
     --akzent-tief  Hover zu --akzent-voll
     --dunkel       Nachtflaeche fuer dunkle Abschnitte
     --text         Fliesstext
     --gedaempft    Grautext, mindestens 4,5:1 auf --flaeche
     --linie        Trennlinien und Rahmen
     --flaeche      Karten und Inhaltsflaechen
     --flaeche-2    zarte Fuellung, Chips, Tabellenzeilen
     --grund        Seitenhintergrund
     --schatten-ton RGB-Tripel ohne Klammern, fuer die Schatten oben
   ============================================================================ */

/* CURAWEL, Logo: #1e70bb und #eb4b00 (logo-curawel.svg Zeile 6, 10, 14) */
:root,
[data-marke="curawel"]{
  --marke:#1e70bb;       --marke-tief:#1a5f9e;  --marke-hell:#b1d0eb;
  --marke-mittel:#68a0d3;
  --akzent:#eb4b00;      --akzent-voll:#c33f00; --akzent-tief:#a03300;
  --dunkel:#052b59;
  --text:#052b59;        --gedaempft:#4d6a89;
  --linie:#d9e6f2;       --linie-zart:#e9f0f7;
  --flaeche:#ffffff;     --flaeche-2:#f2f7fc;   --flaeche-3:#e8f1f9;
  --grund:#ffffff;
  --schatten-ton:5 43 89;
}

/* PFLEGEGRUPPE, Logo: #1E70BB, #EB4B00, Wortmarke #3D3D3C
   (pflegegruppe_logo_2025.svg). Gleiche Familie wie Curawel, deshalb dieselben
   Grundtoene, aber eigene Tiefe und eigener Grund. */
[data-marke="pflegegruppe"]{
  --marke:#1e70bb;       --marke-tief:#175a96;  --marke-hell:#a9d3f5;
  --marke-mittel:#5f9fd8;
  --akzent:#eb4b00;      --akzent-voll:#c04000; --akzent-tief:#a03300;
  --dunkel:#0a1826;
  --text:#0f1f2e;        --gedaempft:#5a6b7d;
  --linie:#dde7f2;       --linie-zart:#eaf1fa;
  --flaeche:#ffffff;     --flaeche-2:#eaf1fa;   --flaeche-3:#dfeaf7;
  --grund:#f5f8fd;
  --schatten-ton:15 31 46;
  --wortmarke:#3D3D3C;
}

/* WELMOA, Logo: Tiefton #104458, Tuerkis #5EBFC0 (welmoa.svg Zeile 3-7).
   Das Tuerkis hat auf Weiss nur 2,17:1 und bleibt deshalb reine Flaeche.
   Fuer Text und gefuellte Knoepfe steht #0B6D7A (6,03:1). */
[data-marke="welmoa"]{
  --marke:#104458;       --marke-tief:#0B3140;  --marke-hell:#A9E0E1;
  --marke-mittel:#3f8081;
  --akzent:#5EBFC0;      --akzent-voll:#0B6D7A; --akzent-tief:#08535D;
  --dunkel:#0B3140;
  --text:#0C2C36;        --gedaempft:#456570;
  --linie:#D5E9EC;       --linie-zart:#E8F6F7;
  --flaeche:#ffffff;     --flaeche-2:#E8F6F7;   --flaeche-3:#D9F0F1;
  --grund:#F3FAFB;
  --schatten-ton:16 68 88;
}

/* AUSTRIFY MEDICAL, Logo: #1f486d und #469dd2 (austrify-medical.svg).
   Die Seite laeuft live und wird nicht umgebaut. Der Steckplatz steht hier,
   damit die Marke im System vorhanden ist und spaeter nicht hineingezwaengt
   werden muss. #469dd2 hat auf Weiss nur 2,99:1, deshalb --akzent-voll. */
[data-marke="austrify"]{
  --marke:#1f486d;       --marke-tief:#16344e;  --marke-hell:#a8cfe9;
  --marke-mittel:#469dd2;
  --akzent:#469dd2;      --akzent-voll:#377ca6; --akzent-tief:#2c6486;
  --dunkel:#16344e;
  --text:#16344e;        --gedaempft:#4a6478;
  --linie:#dde5ee;       --linie-zart:#eef3f8;
  --flaeche:#ffffff;     --flaeche-2:#eef3f8;   --flaeche-3:#e2ecf5;
  --grund:#f7fafc;
  --schatten-ton:31 72 109;
}

/* CW GROUP, Logo: #004a80 (Logos/CWG/logo-svg.svg).
   Die Website setzte bisher #014a80, ein Punkt daneben. Es gilt das Logo.
   Das Dach tritt visuell zurueck und ueberlaesst den Marken die Buehne. */
[data-marke="cwg"]{
  --marke:#004a80;       --marke-tief:#00375e;  --marke-hell:#7fb2d9;
  --marke-mittel:#2e7cb0;
  --akzent:#ea5b0c;      --akzent-voll:#c94e0a; --akzent-tief:#a83f08;
  --dunkel:#012c4d;
  --text:#1a2432;        --gedaempft:#5b6879;
  --linie:#e2e7ee;       --linie-zart:#eef1f6;
  --flaeche:#ffffff;     --flaeche-2:#f2f5f8;   --flaeche-3:#e6ecf3;
  --grund:#ffffff;
  --schatten-ton:1 36 60;
}

/* ------------------------------------------------------ Gemeinsame Grundlage
   Was auf jeder Seite gleich aussehen muss, egal welche Marke. */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--sprung);
  color-scheme:light;          /* alle CWG-Marken werden immer hell dargestellt */
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
body{
  font-family:var(--schrift-text);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  font-synthesis:none;         /* Avant Garde nie kuenstlich fetten */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;    /* lange deutsche Komposita brechen sauber */
}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{
  font-family:var(--schrift-display);
  font-weight:500;
  letter-spacing:var(--ls-eng);
  /* Verteilt die Woerter gleichmaessig auf die Zeilen, statt das letzte Wort
     allein stehen zu lassen. "Pflege verstehen wir von / innen" war so ein Fall.
     Browser ohne Unterstuetzung ignorieren die Zeile einfach. */
  text-wrap:balance;
}
section[id]{scroll-margin-top:var(--sprung)}
img,svg{display:block;max-width:100%}
a,button,summary,label,input,select,textarea{touch-action:manipulation}
button:not(:disabled),[role="button"],label[for],summary{cursor:pointer}

/* ============================================================================
   Der Claim der Gruppe: digital. genial. selbstbestimmt.

   So steht er live auf cwgroup.at: klein geschrieben, Punkt nach jedem Wort,
   je Wort eine Zeile, jedes Wort in einer anderen Farbe. Auf den Markenseiten
   steht er in den Farben der jeweiligen Marke, damit derselbe Satz ueberall
   erkennbar ist und trotzdem den Absender zeigt.

   Kontraste am 24.08.2026 fuer alle fuenf Marken nachgerechnet. Auf Dunkel
   liegt der schwaechste Wert bei 3,70:1 (Curawels Orange), das reicht fuer
   Schrift ab 24px. Auf Hell liegt der schwaechste bei 4,57:1.
   ============================================================================ */
.claim{
  font-family:var(--schrift-display);
  font-weight:500;
  letter-spacing:var(--ls-eng);
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);
  line-height:1.12;
  margin:0;
}
.claim span{display:block}
/* Auf hellem Grund */
.claim span:nth-child(1){color:var(--text)}
.claim span:nth-child(2){color:var(--akzent-voll)}
.claim span:nth-child(3){color:var(--marke)}
/* Welmoa auf hellem Grund: --text und --marke sind dort beide ein sehr dunkles
   Teal und lassen sich kaum unterscheiden. Deshalb drei Stufen desselben Tons,
   von dunkel nach mittel. Kontraste auf Weiss: 14,69 / 6,03 / 4,55. */
[data-marke="welmoa"] .claim:not(.claim--hell) span:nth-child(1){color:var(--marke)}
[data-marke="welmoa"] .claim:not(.claim--hell) span:nth-child(3){color:var(--marke-mittel)}

/* Auf dunklem Grund, so wie auf cwgroup.at */
.claim--hell span:nth-child(1){color:#fff}
.claim--hell span:nth-child(2){color:var(--akzent)}
.claim--hell span:nth-child(3){color:var(--marke-hell)}
/* In einer Zeile, wenn der Platz knapp ist */
.claim--zeile span{display:inline}
.claim--zeile span + span{margin-left:.3em}
/* Klein, etwa in der Fusszeile neben dem Logo */
.claim--klein{font-size:clamp(1.15rem,1rem + .7vw,1.55rem)}

/* Die drei Woerter blenden nacheinander ein, wie auf cwgroup.at.
   Ohne JavaScript und bei reduzierter Bewegung sind sie sofort da. */
@media (prefers-reduced-motion:no-preference){
  .claim--auf span{opacity:0;transform:translateY(.25em);animation:claim-auf .5s var(--ease) forwards}
  .claim--auf span:nth-child(1){animation-delay:.05s}
  .claim--auf span:nth-child(2){animation-delay:.35s}
  .claim--auf span:nth-child(3){animation-delay:.65s}
}
@keyframes claim-auf{to{opacity:1;transform:none}}

/* ----------------------------------------------------------- Bildnachweis
   Solange keine echten Aufnahmen aus den Haeusern vorliegen, sind die Fotos
   mit KI erzeugt. Das steht dran. Curawel machte das von Anfang an, die
   anderen Marken nicht, das waren zwei Ehrlichkeitsmassstaebe in einer Gruppe. */
/* p.bildnachweis statt .bildnachweis: die Zeile traegt oft zusaetzlich .wrap,
   und .wrap steht spaeter und setzt max-width auf die volle Blattbreite.
   Element plus Klasse gewinnt. Gemessen 06.09.2026: 1085 statt 78ch. */
p.bildnachweis{
  margin-top:1rem;
  /* Ohne Begrenzung lief die Zeile ueber die volle Blattbreite, auf dem
     Notebook gemessen 197 Zeichen. Lesbar sind rund 75. */
  max-width:78ch;
  margin-left:auto;
  margin-right:auto;
  font-size:.8125rem;
  color:var(--gedaempft);
  text-align:center;
}
.ki-tag{
  display:inline-block;
  margin-left:.5rem;
  padding:.1rem .5rem;
  border:1px solid var(--linie);
  border-radius:var(--r-voll);
  /* 10.09.2026: von .6875rem hoch. Das waren 11px, unter der Lesbarkeitsgrenze
     von 12px. Betrifft alle vier Marken, der Hinweis ist ueberall derselbe. */
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--gedaempft);
  white-space:nowrap;
}


/* Teil 2 von 3: gemeinsame Effektschicht, Quelle _Kern/effekte.css */
/* ============================================================================
   EFFEKTSCHICHT DER CW GROUP                             angelegt 06.09.2026
   Gilt fuer alle vier Marken. Wird von _Kern/stil.py zwischen tokens.css und
   die markeneigene CSS gehaengt, die Marke kann also alles ueberschreiben.

   Warum hier und nicht viermal einzeln: die Effekte waren zuerst nur bei der
   Pflegegruppe. Sie danach in drei Dateien zu kopieren haette drei Fassungen
   erzeugt, die auseinanderlaufen.

   Die Marken heissen ihre Bausteine verschieden. Statt die Regeln dreimal zu
   wiederholen, stehen alle Namen in einer :is()-Liste. Was eine Marke nicht
   hat, greift dort einfach nicht.

   Regeln, die ich mir dafuer gesetzt habe:
   - Nichts, was den Text schwerer lesbar macht.
   - Alles Neue liegt hinter prefers-reduced-motion.
   - Scrollgetriebenes laeuft ueber animation-timeline, also nativ und ohne
     Rechenlast im Haupt-Thread. Wo der Browser das nicht kann, passiert
     schlicht nichts, statt dass etwas kaputt aussieht.
   ============================================================================ */

/* ------------------------------------------------- Variablen der Laufzeit */
@property --mx{syntax:"<percentage>";inherits:false;initial-value:50%}
@property --my{syntax:"<percentage>";inherits:false;initial-value:50%}
@property --i {syntax:"<number>";    inherits:false;initial-value:0}

/* ---------------------------------------------------------- Seitenuebergang
   Der Wechsel zwischen zwei Seiten ist der Moment, an dem sich eine Website am
   deutlichsten nach Dokument statt nach Anwendung anfuehlt. Eine Regel. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:cwg-vt-raus .22s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:cwg-vt-rein .34s cubic-bezier(0,0,.2,1) both}
  @keyframes cwg-vt-raus{to{opacity:0;transform:translateY(-6px)}}
  @keyframes cwg-vt-rein{from{opacity:0;transform:translateY(10px)}}
}

/* ------------------------------------------------- Bilder am Scrollen ziehen
   Der staerkste Tiefeneindruck fuer den geringsten Aufwand: das Bild wandert
   langsamer als seine Umgebung. Bewusst klein, 3,5 Prozent statt 30.

   AUSGENOMMEN sind Curawels .illu-Bilder. Die haben schon eine eigene
   Parallaxe ueber --par und einen Aufdeck-Effekt ueber clip-path. Eine zweite
   Animation darauf wuerde den Notausgang ueberschreiben, der sie sichtbar
   macht, wenn der Beobachter nicht ausloest. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    :is(
      .held-bild, .tile.img, .gitem, .aphoto .frame, .pa .thumb,   /* Pflegegruppe */
      .karte--bild, .mprofil, .held-raster,                        /* Welmoa */
      .qcard__bild                                                 /* Curawel */
    ) > img{
      animation:cwg-bildzug linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes cwg-bildzug{
      from{transform:scale(1.14) translateY(-3.5%)}
      to  {transform:scale(1.14) translateY(3.5%)}
    }
  }
}

/* ---------------------------------------------------- Abschnittskoepfe heben
   Beim Hereinkommen zieht der Kopf leicht nach oben und wird schaerfer. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    :is(.head, .markt-kopf, .berufsgruppe-kopf, .svc-group__hd){
      animation:cwg-kopfzug linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 90%;
    }
    @keyframes cwg-kopfzug{from{opacity:.35;transform:translateY(26px)}to{opacity:1;transform:none}}
  }
}

/* --------------------------------------------------------- Glanz am Hauptknopf
   Ein einzelner Lichtstreifen laeuft beim Zeigen ueber den Knopf. Einmal,
   schnell, nicht in Schleife. Schleifen wirken billig.
   Nur der Hauptknopf, nicht die stillen Varianten. */
:is(.btn-cta, .btn-haupt, .dienst-knopf,
    .btn:not(.btn--ghost):not(.btn--outline-white):not(.btn--white):not(.btn--sm))
{position:relative;overflow:hidden}
:is(.btn-cta, .btn-haupt, .dienst-knopf,
    .btn:not(.btn--ghost):not(.btn--outline-white):not(.btn--white):not(.btn--sm))::after
{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  :is(.btn-cta, .btn-haupt, .dienst-knopf,
      .btn:not(.btn--ghost):not(.btn--outline-white):not(.btn--white):not(.btn--sm)):hover::after
  {animation:cwg-glanz .7s cubic-bezier(.3,0,.2,1)}
  @keyframes cwg-glanz{to{left:120%}}
}

/* --------------------------------------------------------------- Koernung
   Eine kaum sichtbare Koernung ueber den farbigen Flaechen. Nimmt Verlaeufen
   das Digitale. Inline als Daten-URI, also keine zusaetzliche Anfrage.
   Curawel AT hat dafuer schon .korn, das bleibt unberuehrt. */
/* Welmoas .held ist bewusst NICHT dabei: dort haengt an ::after schon ein
   Verlauf am Fuss des Heros. Meine Regel wuerde still ueberschrieben, und
   spaeter wundert sich jemand, warum die Koernung dort nicht wirkt. */
:is(.hero, .schluss, .seitenheld, .phero, .cta-band, .section--navy)::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
:is(.schluss, .cta-band, .section--navy)::after{mix-blend-mode:overlay;opacity:.7}
:is(.hero, .schluss, .seitenheld, .phero, .cta-band, .section--navy){position:relative}
/* NICHT "> *" verwenden. position:relative auf jedes Kind zu setzen reisst
   absolut positionierte Elemente aus ihrer Verankerung, bei Curawel zum
   Beispiel .hero__glow. Deshalb nur die bekannten Inhaltsbehaelter anheben. */
:is(.hero, .seitenheld, .phero, .cta-band, .section--navy)
  > :is(.wrap, .hero__in, .cta-band__in, .phero__in){position:relative;z-index:1}

/* ------------------------------------------------------------- Feinschliff
   Kleinigkeiten, die niemand einzeln bemerkt und die zusammen den Unterschied
   machen. */
h1,h2,.h1,.h2{text-wrap:balance}
.lead,.hero__lead{text-wrap:pretty}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Gestapelte Schatten statt eines einzelnen. Ein Schatten sieht aufgeklebt
   aus, drei sehen aus wie Licht. Ueberschreibt die Tokens aus tokens.css. */
:root{
  --sh-2:0 1px 2px rgb(var(--schatten-ton) / .05),
         0 6px 14px rgb(var(--schatten-ton) / .07),
         0 22px 48px rgb(var(--schatten-ton) / .09);
  --sh-3:0 2px 4px rgb(var(--schatten-ton) / .06),
         0 12px 28px rgb(var(--schatten-ton) / .10),
         0 40px 80px rgb(var(--schatten-ton) / .14);
}

/* Wer die Systemeinstellung gesetzt hat, bekommt die ruhige Fassung. */
@media (prefers-reduced-motion:reduce){
  :is(.held-bild,.tile.img,.gitem,.aphoto .frame,.pa .thumb,.karte--bild,
      .mprofil,.held-raster,.qcard__bild) > img,
  :is(.head,.markt-kopf,.berufsgruppe-kopf,.svc-group__hd){animation:none}
  :is(.btn-cta,.btn-haupt,.dienst-knopf,.btn)::after{display:none}
}


/* Teil 3 von 3: was nur diese Marke braucht, Quelle curawel.css */
/* Die Schrift steht seit 06.09.2026 im Kern und gilt fuer alle vier Marken:
   Jost fuer Ueberschriften, Inter fuer den Fliesstext, siehe _Kern/tokens.css.
   An cwgroup.at gemessen: H1 Jost 700 mit -1.8px auf 72px, Fliesstext Inter 400,
   Auszeichnungszeile Inter 600 mit 1.8px Laufweite. */


/* ============================================================
   Token
   Die Form (Typo, Abstaende, Radien, Schatten, Knopfgeometrie) steht seit
   24.08.2026 in _Kern/tokens.css und gilt fuer alle CWG-Marken. Hier stehen
   nur noch die Namen, die diese Seite historisch benutzt, als Verweis auf
   die gemeinsamen Steckplaetze. So mussten die 157 Klassen darunter nicht
   angefasst werden.
   ============================================================ */
:root{
  --display-weight:600;
  --ls-eng:-.025em;              /* wie auf cwgroup.at gemessen */

  --navy:var(--dunkel);
  --blue:var(--marke);
  --blue-ink:var(--marke-tief);
  --blue-mid:var(--marke-mittel);
  --sky:var(--marke-hell);
  --orange:var(--akzent);
  --orange-solid:var(--akzent-voll);
  --orange-deep:var(--akzent-tief);

  --paper:var(--flaeche);
  --mist:var(--flaeche-2);
  --mist-2:var(--flaeche-3);
  --line:var(--linie);
  --line-soft:var(--linie-zart);

  --muted:var(--gedaempft);

  --r:var(--r-s);
  --r-lg:var(--r-l);
  --shadow:var(--sh-2);
  --shadow-lg:var(--sh-3);
}

/* ============================================================
   Reset
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
/* Das hidden-Attribut muss jede eigene display-Regel schlagen. Ohne
   diese Zeile stand der Hinweis auf die Pflegegruppe (.note ist
   display:flex) auch dann auf der Bewerbungsseite, wenn "Sitzwache"
   gewaehlt war: Autorenregeln schlagen die Browservorgabe
   [hidden]{display:none}. Gefunden am 07.09.2026 beim Durchgehen aller
   Seiten, der Fehler lag seit dem Bau der Weiche im August drin. */
[hidden]{display:none !important}
html{
  -webkit-text-size-adjust:100%;
  color-scheme:light;                 /* Curawel wird immer hell dargestellt */
}
a,button,summary,label,input,select,textarea{touch-action:manipulation}
a,button,summary{-webkit-tap-highlight-color:rgba(30,112,187,.15)}
body,h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--schrift-text);
  font-size:1.0525rem;             /* Inter hat mehr x-Hoehe als Unica */
  line-height:1.65;
  font-synthesis:none;              /* Avant Garde nie kuenstlich fetten */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;         /* lange deutsche Komposita brechen sauber */
  overflow-x:hidden;
}

/* ============================================================
   Typografie
   ============================================================ */
.h1,.h2,.h3,.h4,.stat__num,.step__no{
  font-family:var(--schrift-display);
  font-weight:var(--display-weight);
  letter-spacing:-.015em;
  text-wrap:balance;
}
.stat__num,.shift__scale,.shift__meta,.step__no{font-variant-numeric:tabular-nums}
.h1{font-size:clamp(2.25rem,1.25rem + 3.4vw,4.1rem);line-height:1.05;letter-spacing:var(--ls-eng);font-weight:700;color:var(--blue);text-wrap:balance}
.h2{font-size:clamp(1.75rem,1.15rem + 2.1vw,2.9rem);line-height:1.1;letter-spacing:-.022em;font-weight:700;color:var(--blue);text-wrap:balance}
.h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);line-height:1.22;color:var(--navy);letter-spacing:-.015em}
.h4{font-size:1.0625rem;line-height:1.3;color:var(--navy);letter-spacing:-.008em}

.eyebrow{
  font-family:var(--schrift-text);font-weight:700;
  font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--orange-deep);
  display:flex;align-items:center;gap:.65rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);flex:none}
.eyebrow--center{justify-content:center}

.lead{font-size:clamp(1.05rem,1rem + .35vw,1.24rem);line-height:1.58;color:var(--muted)}
.muted{color:var(--muted)}
.tight{max-width:62ch}

a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--navy)}
strong,b{font-weight:700}

/* Fokus ist ueberall sichtbar */
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:.75rem;top:-4rem;z-index:200;
  background:var(--navy);color:#fff;padding:.7rem 1.1rem;border-radius:10px;
  text-decoration:none;font-weight:700;transition:top .18s var(--ease);
}
.skip:focus{top:.75rem;color:#fff}

/* ============================================================
   Layout
   ============================================================ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
.section--mist{background:var(--mist)}
.section--navy{background:var(--navy);color:#fff}
.section--navy .h2{color:var(--sky)}
.section--navy .h3,.section--navy .h4{color:#fff}
.section--navy .muted,.section--navy .lead{color:#c6dcf0}
.section--navy .eyebrow{color:#ffb08a}
.section--navy .eyebrow::before{background:var(--orange)}

.head{display:grid;gap:1rem;margin-bottom:clamp(2rem,4vw,3.25rem)}
.head--center{justify-items:center;text-align:center}
.head p{max-width:60ch}
.head--center p{margin-inline:auto}

.grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media (min-width:640px){.g-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.g-3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1040px){.g-4{grid-template-columns:repeat(4,1fr)}}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --bg:var(--orange-solid);--fg:#fff;--bd:var(--orange-solid);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:.8rem 1.5rem;
  background:var(--bg);color:var(--fg);border:2px solid var(--bd);
  border-radius:999px;
  font-weight:700;font-size:1rem;line-height:1.2;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn:hover{--bg:var(--orange-deep);--bd:var(--orange-deep);color:#fff;box-shadow:0 10px 24px -10px rgba(235,75,0,.65);transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn svg{width:20px;height:20px;flex:none}

.btn--ghost{--bg:transparent;--fg:var(--blue);--bd:var(--blue)}
.btn--ghost:hover{--bg:var(--blue);--fg:#fff;--bd:var(--blue);box-shadow:0 10px 24px -10px rgba(30,112,187,.6)}
.btn--white{--bg:#fff;--fg:var(--navy);--bd:#fff}
.btn--white:hover{--bg:var(--sky);--fg:var(--navy);--bd:var(--sky);box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.btn--outline-white{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.55)}
.btn--outline-white:hover{--bg:rgba(255,255,255,.12);--fg:#fff;--bd:#fff;box-shadow:none}
.btn--sm{min-height:44px;padding:.5rem 1.1rem;font-size:.94rem}

.btns{display:flex;flex-wrap:wrap;gap:.75rem}

/* Textlink mit Pfeil */
.arrow{
  display:inline-flex;align-items:center;gap:.4rem;min-height:26px;
  font-weight:700;text-decoration:none;color:var(--blue);
}
.arrow::after{content:"→";transition:transform .18s var(--ease)}
.arrow:hover::after{transform:translateX(4px)}
/* Freistehende Pfeillinks in eigenem Absatz: mehr Platz zum Antippen */
.wrap > p > .arrow,.prose > p > .arrow{padding-block:.45rem}

/* ============================================================
   Kopfzeile
   ============================================================ */
.hdr{
  position:sticky;top:0;z-index:90;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.hdr.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 20px -14px rgba(5,43,89,.4)}
.hdr__in{display:flex;align-items:center;gap:1rem;min-height:74px;padding-block:.7rem}
.hdr__logo{display:flex;align-items:center;flex:none;padding:.25rem;margin-left:-.25rem;border-radius:8px}
.hdr__logo svg{width:auto;height:28px}
.hdr__nav{display:none;margin-left:auto}
.hdr__nav > ul{display:flex;align-items:center;gap:clamp(.4rem,.8vw,1rem)}

/* Zwischen 1140 und 1400 wird es in der Kopfzeile eng, Jost laeuft breiter
   als die alte Schrift. Der Knopf heiszt dort nur "anfragen", ab 1400
   wieder "Sitzwache anfragen". Im Handymenue steht immer die lange Form. */
.hdr__nav > ul > li > a{
  display:block;padding:.5rem .1rem;color:var(--navy);text-decoration:none;
  font-weight:600;font-size:.925rem;letter-spacing:-.005em;
  position:relative;white-space:nowrap;
}
.hdr__nav > ul > li > a::after{
  content:"";position:absolute;left:0;right:0;bottom:.15rem;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .2s var(--ease);
}
.hdr__nav > ul > li > a:hover::after,
.hdr__nav > ul > li > a[aria-current]::after{transform:scaleX(1)}
.hdr__act{display:none;gap:.5rem;align-items:center;flex:none}
.hdr__tel{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:600;font-size:.94rem;color:var(--navy);text-decoration:none;
  white-space:nowrap;padding:.5rem .2rem;
}
.hdr__tel svg{width:19px;height:19px;color:var(--orange)}
.hdr__tel:hover{color:var(--blue)}

.burger{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border:2px solid var(--line);background:#fff;border-radius:12px;cursor:pointer;
}
.burger svg{width:22px;height:22px;color:var(--navy)}
@media (min-width:1240px){
  .hdr__nav{display:block}
  .hdr__act{display:flex;margin-left:clamp(.75rem,2vw,2rem)}
  .burger{display:none}
}

/* Mobile Menue */
.mnav{
  position:fixed;inset:0;z-index:120;background:var(--paper);
  display:grid;grid-template-rows:auto 1fr auto;
  transform:translateY(-100%);visibility:hidden;
  transition:transform .32s var(--ease),visibility .32s;
}
.mnav[data-open="true"]{transform:translateY(0);visibility:visible}
.mnav__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:74px;padding:.7rem var(--gut);border-bottom:1px solid var(--line)}
.mnav__top svg.logo{height:28px;width:auto}
.mnav__body{overflow-y:auto;padding:1.5rem var(--gut) 1rem}
.mnav__body a{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 0;border-bottom:1px solid var(--line-soft);
  font-family:var(--schrift-display);font-weight:600;font-size:1.4rem;
  color:var(--navy);text-decoration:none;
}
.mnav__body a::after{content:"→";color:var(--orange);font-family:var(--schrift-text)}
.mnav__foot{padding:1.25rem var(--gut) calc(1.25rem + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:.6rem;background:var(--mist)}
.mnav__foot .btn{width:100%}

/* Fixe Kontaktleiste am Handy */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:flex;gap:.5rem;align-items:center;
  padding:.55rem var(--gut) calc(.55rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -18px rgba(5,43,89,.7);
}
.dock .btn{flex:1;min-height:48px;padding-inline:.55rem;font-size:.88rem;white-space:nowrap}
.dock .btn--main{flex:1.7}
.dock .btn--main{flex:1.55}
.dock .btn--icon{flex:none;width:48px;padding:0}
.dock .btn--icon svg{width:20px;height:20px}
@media (min-width:1240px){.dock{display:none}}
@media (max-width:1239px){body{padding-bottom:76px}}

/* ============================================================
   Held
   ============================================================ */
.hero{position:relative;overflow:hidden;background:var(--paper)}
.hero::before{                       /* Zeitraster, 12 feine Linien wie im Dienstplan */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(242,247,252,0) 0%,rgba(232,241,249,.85) 100%),
    repeating-linear-gradient(90deg,var(--line-soft) 0 1px,transparent 1px calc(100% / 12));
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
  opacity:.9;
}
.hero__in{position:relative;padding-block:clamp(2.5rem,5vw,4.5rem) clamp(3rem,6vw,5.5rem);display:grid;gap:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:1000px){
  .hero__in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(2.5rem,4vw,4rem)}
}
.hero__copy{display:grid;gap:1.35rem;justify-items:start}
.hero .h1{max-width:14ch}
.hero__lead{max-width:52ch}
.hero__doors{display:flex;flex-wrap:wrap;gap:.75rem;width:100%}
.hero__doors .btn{flex:1 1 220px}
.hero__note{display:flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--muted)}
.hero__note svg{width:17px;height:17px;color:var(--blue);flex:none}

/* Kennzahlen */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;width:100%;border-top:1px solid var(--line);padding-top:1.35rem;margin-top:.35rem}
.stat__num{display:block;font-size:clamp(1.7rem,1.2rem + 1.6vw,2.5rem);line-height:1;letter-spacing:-.03em;font-weight:700;color:var(--navy)}
.stat__lbl{display:block;margin-top:.4rem;font-size:.83rem;line-height:1.3;color:var(--muted)}
@media (max-width:420px){.stat__lbl{font-size:.76rem}}

/* Dienstplan-Karte: das Herzstueck */
.shift{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:clamp(1.15rem,2.5vw,1.7rem);
  display:grid;gap:1rem;max-width:520px;width:100%;justify-self:center;
}
.shift__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.shift__ward{display:grid;gap:.15rem;min-width:0}
.shift__ward b{font-size:.98rem;line-height:1.2}
.shift__ward span{font-size:.8rem;color:var(--muted);letter-spacing:.02em}
.pill{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;
  padding:.32rem .7rem;border-radius:999px;
  font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--mist-2);color:var(--blue-ink);border:1px solid var(--line);
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.pill__dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.shift.is-filled .pill{background:#e6f4ea;color:#14663a;border-color:#bfe3cd;transition-delay:.9s}

.shift__rail{position:relative;display:grid;gap:.55rem}
.shift__scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.shift__track{
  position:relative;height:46px;border-radius:10px;
  background:var(--mist);border:1px dashed var(--line);overflow:hidden;
}
.shift__ticks{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(100% / 12 - 1px),var(--line-soft) calc(100% / 12 - 1px) calc(100% / 12))}
.shift__fill{
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--blue) 0%,var(--blue-mid) 100%);
  border-radius:9px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.5s var(--ease);
}
.shift.is-filled .shift__fill{transform:scaleX(1)}
.shift__label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:.88rem;font-weight:700;color:var(--muted);
  transition:color .25s var(--ease);
}
.shift.is-filled .shift__label{color:#fff;transition-delay:.9s}
.shift__label svg{width:17px;height:17px;opacity:0;transform:scale(.6);transition:opacity .3s var(--ease) 1.2s,transform .3s var(--ease) 1.2s}
.shift.is-filled .shift__label svg{opacity:1;transform:scale(1)}
.shift__meta{display:flex;flex-wrap:wrap;gap:.35rem 1.15rem;font-size:.82rem;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:.85rem}
.shift__meta b{color:var(--navy);font-weight:700}
.shift__cap{font-size:.78rem;color:var(--muted);line-height:1.45}
@media (prefers-reduced-motion:reduce){
  .shift__fill,.shift__label svg,.pill{transition:none}
}

/* ============================================================
   Wie es laeuft, drei Schritte
   ============================================================ */
.model{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media (min-width:860px){.model{grid-template-columns:repeat(3,1fr)}}
.mcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.25rem,2.4vw,1.75rem);display:grid;gap:.7rem;align-content:start;
  position:relative;
}
.mcard__ic{width:44px;height:44px;color:var(--blue)}
.mcard p{color:var(--muted);font-size:.98rem}
/* Der Verbindungspfeil zwischen den drei Schritten sitzt auf ::before.
   Auf ::after liegt seit der Effektschicht der Lichtkegel, und der ist
   im Normalzustand durchsichtig: der Pfeil war dadurch nur beim
   Darueberfahren zu sehen und hing dann halb ausserhalb der Karte.
   07.09.2026 */
@media (min-width:860px){
  .model .mcard:not(:last-child)::before{
    content:"→";position:absolute;right:calc(-.75rem - 5px);top:50%;transform:translateY(-50%);
    color:var(--sky);font-size:1.3rem;line-height:1;font-weight:700;
    pointer-events:none;
  }
}

/* ============================================================
   Leistungen
   ============================================================ */
.svc-group{display:grid;gap:1.1rem}
.svc-group + .svc-group{margin-top:clamp(2.25rem,4vw,3.25rem)}
.svc-group__hd{display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap;padding-bottom:.5rem;border-bottom:2px solid var(--line)}
.svc-group__hd .h3{color:var(--blue)}
.svc-group__hd span{font-size:.88rem;color:var(--muted)}
.tag{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;
  padding:.28rem .62rem;border-radius:999px;
  font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
}
.tag--now{background:#e6f4ea;color:#14663a;border:1px solid #bfe3cd}
.tag__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ============================================================
   Aufgabenliste: was eine Sitzwache tut und was nicht
   ============================================================ */
.duty{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media (min-width:860px){.duty{grid-template-columns:repeat(2,1fr)}}
.duty__col{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.25rem,2.4vw,1.85rem);display:grid;gap:1rem;align-content:start}
.duty__col--no{background:var(--mist)}
.duty__hd{display:flex;align-items:center;gap:.7rem}
.duty__hd .h4{font-size:1.1rem}
.mark{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}
.mark svg{width:16px;height:16px}
.mark--yes{background:#e6f4ea;color:#14663a}
.mark--no{background:#fdece5;color:#a03300}
.duty ul{display:grid;gap:.6rem}
.duty li{display:flex;gap:.65rem;align-items:flex-start;font-size:.99rem;color:var(--navy);min-width:0}
.duty li::before{
  content:"";width:8px;height:8px;border-radius:2px;margin-top:.5rem;flex:none;
}
.duty__col--yes li::before{background:#2f9e63}
.duty__col--no li::before{background:var(--orange)}

/* ============================================================
   Vorteilsliste
   ============================================================ */
.perks{display:grid;gap:clamp(.85rem,1.8vw,1.15rem);grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.perk{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.15rem}
.section--mist .perk{background:#fff}
.perk__ic{width:40px;height:40px;color:var(--blue);flex:none}
.perk>p{min-width:0}
.perk b{display:block;margin-bottom:.15rem;font-size:1.02rem;color:var(--navy)}
.perk span{font-size:.94rem;color:var(--muted);line-height:1.5}

/* ============================================================
   Ablauf, echte Reihenfolge also nummeriert
   ============================================================ */
.steps{display:grid;gap:0;counter-reset:s}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:1rem 1.15rem;
  padding:1.25rem 0;border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step__no{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--mist-2);color:var(--blue-ink);font-size:1.02rem;
  border:1px solid var(--line);
}
.section--navy .step{border-color:rgba(255,255,255,.18)}
.section--navy .step__no{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:var(--sky)}
.step__bd{display:grid;gap:.3rem;min-width:0}
.step__bd p{color:var(--muted);font-size:.98rem}
.section--navy .step__bd p{color:#c6dcf0}

/* Hinweiskasten */
.note{
  display:flex;gap:.85rem;align-items:flex-start;
  background:var(--mist-2);border:1px solid var(--line);border-left:4px solid var(--orange);
  border-radius:10px;padding:1rem 1.15rem;font-size:.95rem;color:var(--navy);
}
.note svg{width:20px;height:20px;color:var(--orange);flex:none;margin-top:.15rem}
.section--navy .note{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);border-left-color:var(--orange);color:#e5f0f9}

/* Zweispaltiges Modul */
.split{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (min-width:960px){
  /* Standard: breite Textspalte links, schmale Randspalte rechts */
  .split{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr)}
  /* Umgekehrt: schmale Einleitung links, Inhalt rechts */
  .split--flip{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
  /* Zwei gleich starke Spalten, etwa Kontaktkarte neben Formular */
  .split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.split__aside{display:grid;gap:1.35rem;align-content:start}
@media (min-width:960px){.split__aside{position:sticky;top:110px}}

/* ============================================================
   Stimmen
   ============================================================ */
.voices{display:grid;gap:clamp(1rem,2vw,1.4rem)}
@media (min-width:760px){.voices{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.voices{grid-template-columns:repeat(3,1fr)}}
.voice{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.25rem,2.4vw,1.6rem);display:flex;flex-direction:column;gap:.9rem;
}
.voice blockquote{font-size:.99rem;line-height:1.6;color:var(--navy)}
.voice figcaption{margin-top:auto;display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:var(--muted)}
.voice__av{width:34px;height:34px;border-radius:50%;background:var(--mist-2);color:var(--blue-ink);display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none;border:1px solid var(--line)}
.voice__q{width:26px;height:26px;color:var(--sky)}

/* ============================================================
   Werte
   ============================================================ */
.values{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media (min-width:640px){.values{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.values{grid-template-columns:repeat(4,1fr)}}
.value{display:grid;gap:.6rem;align-content:start;padding-top:1.15rem;border-top:2px solid rgba(177,208,235,.35)}
.value__ic{width:44px;height:44px;color:var(--sky)}
.value p{font-size:.95rem;color:#c6dcf0}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;gap:.65rem;max-width:900px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq details[open]{border-color:var(--blue-mid);box-shadow:var(--shadow)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.25rem;cursor:pointer;list-style:none;
  font-weight:700;font-size:1.02rem;color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:12px;height:12px;flex:none;
  border-right:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq summary:hover{color:var(--blue)}
.faq__bd{padding:0 1.25rem 1.25rem;color:var(--muted);font-size:.99rem;display:grid;gap:.7rem}
.faq__bd ul{display:grid;gap:.4rem;padding-left:1.1rem;list-style:disc}
.faq__bd li{padding-left:.2rem}

/* ============================================================
   Kontakt
   ============================================================ */
.ways{display:grid;gap:clamp(1rem,2vw,1.4rem)}
@media (min-width:820px){.ways{grid-template-columns:repeat(3,1fr)}}
.way{
  display:grid;gap:.65rem;align-content:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.25rem,2.4vw,1.6rem);text-decoration:none;color:inherit;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
.way:hover{border-color:var(--blue-mid);box-shadow:var(--shadow);transform:translateY(-2px);color:inherit}
.way__ic{width:44px;height:44px;color:var(--orange)}
.way b{font-size:1.08rem;color:var(--navy);font-family:var(--schrift-display);font-weight:600}
.way span{font-size:.95rem;color:var(--muted)}
.way .arrow{margin-top:.15rem}

.form{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.35rem,3vw,2.25rem);display:grid;gap:1.15rem;box-shadow:var(--shadow);
}
.field{display:grid;gap:.4rem}
.field label{font-weight:700;font-size:.92rem;color:var(--navy)}
.field .hint{font-size:.82rem;color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem .95rem;
  background:var(--mist);border:1.5px solid var(--line);border-radius:10px;
  font-size:1rem;color:var(--navy);
  transition:border-color .16s var(--ease),background-color .16s var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--blue-mid)}
.field input:focus,.field select:focus,.field textarea:focus{background:#fff;border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(30,112,187,.18)}
.field textarea{resize:vertical;min-height:130px;line-height:1.55}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231e70bb' stroke-width='2' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;padding-right:2.6rem}
@media (min-width:620px){.field-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1.15rem}}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--muted);line-height:1.5}
.check input{width:24px;height:24px;flex:none;margin-top:.1rem;accent-color:var(--orange-solid);padding:0}
.form__foot{display:grid;gap:.75rem}
.form__foot .btn{justify-self:start}
@media (max-width:520px){.form__foot .btn{width:100%}}

.contact-card{
  background:var(--navy);color:#fff;border-radius:var(--r-lg);
  padding:clamp(1.35rem,3vw,2rem);display:grid;gap:1.25rem;align-content:start;
}
.contact-card .h3{color:var(--sky)}
.cinfo{display:grid;gap:1rem}
.cinfo__row{display:flex;gap:.85rem;align-items:flex-start}
.cinfo__row>div{min-width:0}
.cinfo__ic{width:22px;height:22px;color:var(--sky);flex:none;margin-top:.2rem}
.cinfo b{display:block;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sky);margin-bottom:.15rem;font-weight:700}
.cinfo a{display:inline-block;min-height:24px;color:#fff;font-weight:700}
.cinfo a:hover{color:var(--sky)}
.cinfo p{font-size:.96rem;color:#d5e6f4;line-height:1.5}

/* ============================================================
   Abschlussband
   ============================================================ */
.cta-band{background:var(--navy);color:#fff}
.cta-band__in{
  padding-block:clamp(3rem,6vw,4.75rem);
  display:grid;gap:1.75rem;justify-items:center;text-align:center;
}
.cta-band .h2{color:var(--sky);max-width:20ch}
.cta-band p{color:#c6dcf0;max-width:52ch}

/* ============================================================
   Fusszeile
   ============================================================ */
.ftr{background:var(--mist);border-top:1px solid var(--line);padding-block:clamp(2.5rem,5vw,4rem) 2rem;font-size:.94rem}
.ftr__grid{display:grid;gap:2rem}
@media (min-width:760px){.ftr__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.ftr__grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr}}
.ftr__logo{height:28px;width:auto;margin-bottom:1rem}
.ftr h3{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem;font-weight:700}
.ftr ul{display:grid;gap:.4rem}
.ftr li a{display:inline-flex;align-items:center;min-height:28px}
.ftr a{color:var(--navy);text-decoration:none;font-weight:400}
.ftr a:hover{color:var(--blue);text-decoration:underline}
.ftr address{font-style:normal;color:var(--muted);line-height:1.65}
.ftr__soc{display:flex;gap:.6rem;margin-top:1.15rem}
.ftr__soc a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--blue);
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.ftr__soc a:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.ftr__soc svg{width:19px;height:19px}
.ftr__base{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.65rem 1.5rem;align-items:center;justify-content:space-between;
  font-size:.87rem;color:var(--muted);
}
.ftr__base ul{display:flex;flex-wrap:wrap;gap:.65rem 1.35rem}

/* Einblenden beim Scrollen, sehr zurueckhaltend */
.rise{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rise.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ============================================================
   Mehrseitigkeit: Bausteine, die nur auf Unterseiten vorkommen
   ============================================================ */

/* Nur fuer Screenreader */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Kopf einer Unterseite */
.phero{background:var(--paper);position:relative;overflow:hidden}
.phero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(242,247,252,0) 0%,rgba(232,241,249,.7) 100%),
    repeating-linear-gradient(90deg,var(--line-soft) 0 1px,transparent 1px calc(100% / 12));
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%);
}
.phero__in{position:relative;padding-block:clamp(2.5rem,5vw,4.25rem) clamp(2.25rem,4vw,3.5rem);display:grid;gap:1.25rem;justify-items:start}
.phero .h1{max-width:18ch}
.phero .lead{max-width:58ch}
.phero .btns{margin-top:.35rem}
@media (min-width:960px){
  .phero__in--split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(2rem,4vw,3.5rem)}
  .phero__in--split > .phero__aside{justify-self:end;width:100%}
}

/* Fliesstext auf den Wissensseiten */
.prose{max-width:70ch;display:grid;gap:1.15rem;font-size:1.075rem;line-height:1.68}
.prose > h2{
  font-family:var(--schrift-display);font-weight:500;letter-spacing:-.015em;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);line-height:1.18;color:var(--blue);
  margin-top:clamp(1.25rem,2.5vw,2rem);
}
.prose > h3{
  font-family:var(--schrift-display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.35rem);line-height:1.25;color:var(--navy);
  margin-top:.6rem;
}
.prose ul,.prose ol{display:grid;gap:.55rem;padding-left:1.35rem}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{padding-left:.25rem}
.prose li::marker{color:var(--orange)}
.prose a{font-weight:700}
.prose figure{margin:0}
.prose > .note,.prose > .duty,.prose > .tbl-wrap{max-width:none}

/* Inhaltsverzeichnis */
.toc{
  background:var(--mist);border:1px solid var(--line);border-radius:var(--r);
  padding:1.15rem 1.35rem;display:grid;gap:.6rem;
}
.toc h2{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;font-family:var(--schrift-text)}
.toc ol{display:grid;gap:.45rem;counter-reset:t;list-style:none;padding:0}
.toc li{counter-increment:t;display:flex;gap:.6rem;font-size:.97rem}
.toc li::before{content:counter(t) ".";color:var(--orange);font-weight:700;flex:none}
.toc a{display:inline-block;padding:.3rem 0;color:var(--navy);text-decoration:none;font-weight:400}
.toc a:hover{color:var(--blue);text-decoration:underline}

/* Vergleichstabelle */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;-webkit-overflow-scrolling:touch}
.tbl{border-collapse:collapse;width:100%;min-width:640px;font-size:.96rem}
.tbl th,.tbl td{padding:.85rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.tbl thead th{
  background:var(--mist);color:var(--navy);font-size:.78rem;letter-spacing:.07em;
  text-transform:uppercase;font-weight:700;white-space:nowrap;border-bottom:2px solid var(--line);
}
.tbl tbody th{font-weight:700;color:var(--navy);white-space:nowrap}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl td{color:var(--muted)}

/* Karten, die auf eine andere Seite fuehren */
.linkcards{display:grid;gap:clamp(1rem,2vw,1.35rem);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.linkcard{
  display:flex;flex-direction:column;gap:.7rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.25rem,2.4vw,1.6rem);text-decoration:none;color:inherit;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
.linkcard:hover{border-color:var(--blue-mid);box-shadow:var(--shadow);transform:translateY(-2px);color:inherit}
.linkcard__ic{width:44px;height:44px;color:var(--blue);flex:none}
.linkcard b{font-family:var(--schrift-display);font-weight:600;font-size:1.2rem;line-height:1.25;color:var(--navy);letter-spacing:-.01em}
.linkcard span{font-size:.96rem;color:var(--muted);line-height:1.55}
.linkcard .arrow{margin-top:auto;padding-top:.35rem}

/* Offene Taetigkeiten */
.jobs{display:grid;gap:1rem}
.job{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.25rem,2.4vw,1.6rem);
  display:grid;gap:.85rem;
}
@media (min-width:820px){
  .job{grid-template-columns:56px minmax(0,1fr) auto;align-items:start;gap:1.25rem}
  .job__act{grid-column:3;align-self:center}
}
.job__ic{width:52px;height:52px;color:var(--blue)}
.job__bd{display:grid;gap:.5rem}
.job__meta{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin-top:.15rem}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.28rem .65rem;border-radius:999px;background:var(--mist);border:1px solid var(--line);
  font-size:.79rem;font-weight:700;color:var(--navy);white-space:nowrap;
}
.chip svg{width:14px;height:14px;color:var(--blue)}
.job p{color:var(--muted);font-size:.97rem}

/* Zahlenband, kompakt, fuer Unterseiten */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.25rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:1.5rem}
.figs div{display:grid;gap:.3rem}
.figs b{font-family:var(--schrift-display);font-weight:700;font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);line-height:1;color:var(--navy);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.figs span{font-size:.85rem;color:var(--muted);line-height:1.4}

/* ============================================================
   Bilder
   KI-erzeugte Fotos, bewusst hell und dokumentarisch, keine
   Nachtstimmung. Platzhalter, bis echte Aufnahmen aus den
   Haeusern da sind.
   ============================================================ */
.illu{
  margin:0 auto;background:var(--mist);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:grid;max-width:820px;width:100%;
}
.illu img{width:100%;height:auto;display:block;background:var(--mist-2);aspect-ratio:auto}
.illu figcaption{
  padding:.85rem 1.15rem;font-size:.85rem;line-height:1.45;color:var(--muted);
  border-top:1px solid var(--line);
  /* Deckende Flaeche, sonst scheint das auf 1.08 skalierte Bild durch den
     Text. .illu hat zwar overflow:hidden, das clippt aber an der Aussenkante
     der Figur und nicht an der Rasterzelle des Bildes. 06.09.2026 */
  background:var(--mist);
}
.prose > .illu{max-width:none;margin-block:.5rem}

/* ============================================================
   Plattform-Leiste ganz oben
   exaPool ist das digitale Organisationssystem hinter
   app.curawel.at. Die Einstiege gehoeren sichtbar nach oben,
   so wie sie auf der alten Seite standen.
   ============================================================ */
.topbar{background:var(--navy);color:#fff;font-size:.86rem}
.topbar__in{display:flex;align-items:center;gap:.35rem 1.35rem;flex-wrap:wrap;min-height:42px;padding-block:.45rem}
.topbar__label{display:flex;align-items:center;gap:.5rem;color:var(--sky);font-weight:700;margin-right:auto}
.topbar__label svg{width:16px;height:16px;flex:none}
.topbar a{
  color:#fff;text-decoration:none;font-weight:700;white-space:nowrap;
  padding:.3rem 0;border-bottom:2px solid transparent;
}
.topbar a:hover{color:var(--sky);border-bottom-color:var(--orange)}
.topbar__app::after{content:" ↗";font-weight:400;opacity:.6}
.topbar__app{color:var(--sky)}
@media (max-width:859px){.topbar{display:none}}

/* In der Handy-Navigation stehen dieselben Einstiege */
.mnav__platt{margin-top:1.5rem;padding-top:1.25rem;border-top:2px solid var(--line)}
.mnav__platt-titel{
  font-family:var(--schrift-text);font-size:.78rem;line-height:1.3;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:.35rem;
}
.mnav__platt a{font-size:1.05rem;font-family:var(--schrift-text);font-weight:700;color:var(--blue)}
.mnav__platt a::after{content:"↗"}

/* ============================================================
   Berufsgruppen-Weiche auf der Bewerbungsseite
   Ersetzt die Auswahl, die vorher in der App lag.
   ============================================================ */
.gruppen{display:grid;gap:clamp(1rem,2vw,1.35rem);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.gruppe{
  display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;text-align:left;
  background:#fff;border:2px solid var(--line);border-radius:var(--r);
  padding:clamp(1.25rem,2.4vw,1.6rem);cursor:pointer;font:inherit;color:inherit;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease);
}
.gruppe:hover{border-color:var(--blue-mid);box-shadow:var(--shadow);transform:translateY(-2px)}
.gruppe.is-aktiv{border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,112,187,.15),var(--shadow)}
.gruppe__tag{
  display:inline-flex;padding:.28rem .62rem;border-radius:999px;
  background:var(--mist-2);color:#1a5a95;border:1px solid var(--line);
  font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
}
.gruppe.is-aktiv .gruppe__tag{background:var(--blue);color:#fff;border-color:var(--blue)}
.gruppe__name{
  font-family:var(--schrift-display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);line-height:1.2;color:var(--navy);
}
.gruppe__text{font-size:.96rem;line-height:1.55;color:var(--muted)}
.gruppe__marke{
  display:flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:.5rem;
  font-size:.88rem;font-weight:700;color:var(--muted);
}
.gruppe__marke svg{width:16px;height:16px;color:var(--line);flex:none}
.gruppe.is-aktiv .gruppe__marke{color:var(--blue)}
.gruppe.is-aktiv .gruppe__marke svg{color:#2f9e63}

/* ============================================================
   Aufklappbare Untermenues
   Maus: aufklappen beim Darueberfahren. Tastatur: der kleine
   Pfeil ist ein echter Knopf mit aria-expanded, Esc schliesst.
   ============================================================ */
.hdr__nav li.has-sub{position:relative;display:flex;align-items:center;gap:.15rem}
.sub-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;border-radius:5px;
}
.sub-toggle::after{
  content:"";width:7px;height:7px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .18s var(--ease),border-color .18s var(--ease);
}
.has-sub:hover .sub-toggle::after,
.sub-toggle[aria-expanded="true"]::after{border-color:var(--orange)}
.sub-toggle[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-2px)}

.subnav{
  position:absolute;top:100%;left:-.9rem;z-index:95;
  min-width:280px;margin-top:.35rem;padding:.5rem;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 2px 4px rgba(5,43,89,.06),0 22px 44px -20px rgba(5,43,89,.35);
  display:grid;gap:.1rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;
}
/* Brücke, damit die Maus nicht durch die Lücke fällt */
.subnav::before{content:"";position:absolute;left:0;right:0;top:-.5rem;height:.5rem}
.has-sub:hover .subnav,
.has-sub:focus-within .subnav,
.subnav.is-open{opacity:1;visibility:visible;transform:none}
.subnav a{
  display:block;padding:.55rem .75rem;border-radius:9px;white-space:nowrap;
  font-size:.94rem;font-weight:400;color:var(--navy);text-decoration:none;
}
.subnav a::after{display:none}
.subnav a:hover{background:var(--mist);color:var(--blue)}
.subnav a[aria-current="page"]{background:var(--mist-2);color:var(--blue);font-weight:700}
@media (prefers-reduced-motion:reduce){.subnav{transition:none}}

/* Untermenues in der Handy-Navigation */
.mnav__sub{display:grid;gap:0;margin:-.25rem 0 .25rem;padding-left:.9rem;border-left:2px solid var(--line)}
.mnav__sub a{
  font-family:var(--schrift-text);font-size:1rem;font-weight:400;color:var(--muted);
  padding:.6rem 0;border-bottom:1px solid var(--line-soft);
}
.mnav__sub a::after{content:"→";color:var(--sky)}
.mnav__sub a:hover{color:var(--blue)}

/* Kennzeichnung für KI-erzeugte Bilder. Pflicht, solange keine echten
   Aufnahmen da sind: die Fotos sehen aus wie Dokumentaraufnahmen. */
.ki-tag{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem;
  padding:.2rem .55rem;border-radius:999px;
  background:var(--mist-2);border:1px solid var(--line);
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.ki-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange);flex:none}
.illu figcaption{display:flex;flex-direction:column;align-items:flex-start}

/* ============================================================
   Bewegung und Tiefe (06.09.2026)

   Emres Auftrag: die Seite soll nicht statisch wirken. Zwei Regeln, an
   die sich alles hier haelt:
   1. Jede Bewegung erklaert etwas. Der Balken fuellt sich, weil ein
      Dienst besetzt wird. Zahlen zaehlen hoch, weil sie Mengen sind.
      Nichts bewegt sich blosz, damit es sich bewegt.
   2. Alles, was ein Element zuerst unsichtbar macht, steht in
      @media (prefers-reduced-motion:no-preference). Wer Bewegung
      abgeschaltet hat, sieht die fertige Seite, nicht eine leere.
   ============================================================ */

/* ---------------------------------------------- Licht hinter dem Kopf
   Zwei sehr weiche Farbwolken in Markenblau und Orange. Sie liegen unter
   dem Zeitraster und wandern langsam, das gibt dem Hero Tiefe, ohne dass
   Text darauf schlechter lesbar wird (beide unter 9 % Deckkraft). */
.hero,.phero{isolation:isolate}
.hero__glow,.phero__glow{
  position:absolute;inset:-20% -10% auto -10%;height:150%;
  pointer-events:none;z-index:0;overflow:hidden;
}
.hero__glow::before,.hero__glow::after,
.phero__glow::before,.phero__glow::after{
  content:"";position:absolute;border-radius:50%;filter:blur(70px);
}
.hero__glow::before,.phero__glow::before{
  width:46vw;height:46vw;min-width:420px;min-height:420px;
  left:-8vw;top:-14vw;background:rgba(30,112,187,.16);
}
.hero__glow::after,.phero__glow::after{
  width:34vw;height:34vw;min-width:300px;min-height:300px;
  right:-6vw;top:8vw;background:rgba(235,75,0,.09);
}
.phero__glow::before{width:34vw;height:34vw;min-width:320px;min-height:320px}
.phero__glow::after{width:24vw;height:24vw;min-width:220px;min-height:220px;top:2vw}
.hero__in,.phero__in{z-index:1}

/* ------------------------------------------------- Lesefortschritt
   Duenner Balken ganz oben. Sagt, wie weit man in einem langen Text ist. */
.fortschritt{
  /* 07.09.2026: lag mit 60 unter der Kopfzeile (90). Die Kopfzeile ist
     durchsichtig, der Balken war aber trotzdem weg, weil ihr
     backdrop-filter alles darunter verwaschen hat. Beides behoben:
     hier hoeher als die Kopfzeile, und der Filter ist unten raus. */
  position:fixed;inset:0 0 auto 0;height:3px;z-index:100;
  background:linear-gradient(90deg,var(--blue),var(--orange));
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  opacity:0;transition:opacity .25s var(--ease);
}
.fortschritt.is-on{opacity:1}

/* ------------------------------------------------------ Karten heben
   Ein gemeinsamer Griff fuer alle Kacheln: beim Zeigen leicht anheben,
   Rand annehmen, Symbol eine Spur groesser. Beim Druecken zurueck. */
.linkcard,.way,.job,.gruppe,.voice,.perk,.mcard,.duty__col{
  position:relative;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),
             border-color .22s var(--ease);
}
.linkcard:hover,.way:hover,.gruppe:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px -22px rgba(5,43,89,.45);
}
.job:hover,.voice:hover,.perk:hover,.mcard:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px -22px rgba(5,43,89,.4);
  border-color:var(--blue-mid);
}
a.linkcard:active,a.way:active,.gruppe:active{transform:translateY(-1px) scale(.995)}
.linkcard__ic,.way__ic,.job__ic,.mcard__ic,.perk__ic{
  transition:transform .28s var(--ease),color .28s var(--ease);
}
.linkcard:hover .linkcard__ic,
.way:hover .way__ic,.job:hover .job__ic,
.mcard:hover .mcard__ic,.perk:hover .perk__ic{transform:translateY(-3px) scale(1.07)}

/* Lichtkante: ein schmaler Verlauf faehrt einmal ueber die Karte. */
.linkcard::before,.way::before,.gruppe::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  background-size:250% 100%;background-position:180% 0;
  opacity:0;transition:opacity .2s var(--ease);
}
.linkcard:hover::before,.way:hover::before,.gruppe:hover::before{
  opacity:1;animation:kante .75s var(--ease) forwards;
}
@keyframes kante{to{background-position:-80% 0}}

/* ------------------------------------------------------- Knopf-Glanz */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);
  background-size:220% 100%;background-position:160% 0;
}
.btn:hover::after{animation:kante .6s var(--ease) forwards}

/* -------------------------------------------------------- Prosa-Links
   Der Unterstrich waechst von links, statt einfach da zu sein. */
.prose a,.faq__bd a{
  text-decoration:none;
  background-image:linear-gradient(var(--orange),var(--orange));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 2px;
  padding-bottom:1px;transition:background-size .28s var(--ease),color .18s var(--ease);
}
.prose a:hover,.faq__bd a:hover{color:var(--orange-deep);background-size:100% 6px}

/* --------------------------------------------------------- Bildblende
   Das Bild wird von oben nach unten freigegeben und faehrt dabei aus
   einer leichten Vergroeszerung in seine Groesze. Wirkt wie aufgedeckt. */
.illu{overflow:hidden;border-radius:var(--r)}
.illu img{border-radius:0}
.illu figcaption{position:relative}

/* --------------------------------------------------------- Weiche Kante
   Statt harter Trennlinie zwischen weiszen und grauen Abschnitten ein
   kurzer Verlauf. Nimmt der Seite das Streifenmuster. */
.section--mist{position:relative}
.section--mist::before,.section--mist::after{
  content:"";position:absolute;left:0;right:0;height:64px;pointer-events:none;
}
.section--mist::before{top:0;background:linear-gradient(var(--paper),transparent)}
.section--mist::after{bottom:0;background:linear-gradient(transparent,var(--paper))}
.section--mist + .section--mist::before,
.section--mist:last-child::after{display:none}

/* ------------------------------------------------------ Zahlen zaehlen */
.stat__num,.figs b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.stats > div,.figs > div{position:relative}

/* ------------------------------------------------------- Abschlussband
   Ein sehr langsam wandernder Verlauf, damit die dunkle Flaeche am Ende
   nicht wie ein Loch wirkt. */
.cta-band{position:relative;overflow:hidden}
.cta-band::before{
  content:"";position:absolute;inset:-40% -20%;pointer-events:none;
  background:
    radial-gradient(38% 46% at 22% 30%,rgba(30,112,187,.55),transparent 70%),
    radial-gradient(32% 40% at 82% 72%,rgba(235,75,0,.32),transparent 70%);
}
.cta-band__in{position:relative}

/* ================= alles Folgende nur, wenn Bewegung erwuenscht ist ==== */
@media (prefers-reduced-motion:no-preference){

  /* Farbwolken wandern */
  .hero__glow::before,.phero__glow::before{animation:wolke-a 26s ease-in-out infinite alternate}
  .hero__glow::after,.phero__glow::after{animation:wolke-b 21s ease-in-out infinite alternate}
  @keyframes wolke-a{to{transform:translate3d(6vw,3vw,0) scale(1.12)}}
  @keyframes wolke-b{to{transform:translate3d(-5vw,4vw,0) scale(1.08)}}
  .cta-band::before{animation:wolke-a 30s ease-in-out infinite alternate}

  /* Gestaffeltes Auftauchen: jedes Kind eine Spur spaeter */
  .rise{transition-delay:calc(var(--i,0) * 60ms)}
  .rise--links{transform:translateX(-18px)}
  .rise--rechts{transform:translateX(18px)}
  .rise--links.is-in,.rise--rechts.is-in{transform:none}

  /* Ueberschrift Wort fuer Wort */
  /* Der unsichtbare Anfangszustand steht NUR im Keyframe. Als eigene Regel
     bleibt der Text dauerhaft weg, sobald die Animation nicht laeuft, und
     es steht eine leere Flaeche da. */
  .wort{display:inline-block}
  .is-getippt .wort{animation:wort-rein .62s var(--ease) both;animation-delay:calc(var(--i) * 65ms)}
  @keyframes wort-rein{from{opacity:0;transform:translateY(.42em)}to{opacity:1;transform:none}}

  /* Bild wird aufgedeckt */
  .illu img{clip-path:inset(0 0 100% 0);transform:scale(1.07);transform-origin:50% 40%}
  .illu.is-in img{
    clip-path:inset(0 0 0 0);transform:none;
    transition:clip-path .95s cubic-bezier(.22,.61,.36,1),transform 1.25s cubic-bezier(.22,.61,.36,1);
  }

  /* Aufgaben und Grenzen: die Punkte kommen nacheinander.
     opacity:1 steht hier zusaetzlich zur Animation. Grund: seit die
     beiden Listen am Telefon in <details> stecken, wird ihr Inhalt im
     zugeklappten Zustand vom Browser uebersprungen, Animationen laufen
     dort nicht. Kaeme die Animation beim Aufklappen aus irgendeinem
     Grund nicht in Gang, staende eine leere Liste da. Am Telefon ist die
     Staffelung deshalb ganz aus, siehe unten. 07.09.2026 */
  .duty__col.is-in li{animation:punkt-rein .45s var(--ease) both;animation-delay:calc(var(--i) * 55ms)}
  /* Notausgang: erscheint nach 4 Sekunden von selbst, falls der Beobachter
     nie ausloest. Kommt .is-in vorher, gewinnt dessen Animation. */
  .duty__col li{opacity:0;animation:notausgang .01s linear 4s forwards}
  .rise{animation:notausgang .01s linear 4s forwards}
  .rise.is-in{animation:none}
  .illu img{animation:notausgang-bild .01s linear 4s forwards}
  .illu.is-in img{animation:none}
  @keyframes notausgang{to{opacity:1;transform:none}}
  @keyframes notausgang-bild{to{clip-path:inset(0 0 0 0);transform:none}}
  @keyframes punkt-rein{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

  /* Die Dienstplan-Karte atmet leicht, solange sie noch offen ist */
  .shift{animation:schweben 7s ease-in-out infinite}
  .shift.is-filled{animation:none}
  @keyframes schweben{50%{transform:translateY(-7px)}}

  /* Kopfzeile verdichtet sich beim Scrollen */
  .hdr{transition:box-shadow .25s var(--ease),background-color .25s var(--ease)}
  /* Der Blur lag hier noch aus der Zeit der durchgehenden weissen
     Leiste. Seit die Kopfzeile eine schwebende Kapsel ist, blieb davon
     ein milchiges Band ueber die volle Breite mit harter Unterkante
     stehen: die spaetere Regel .hdr{backdrop-filter:none} ist weniger
     spezifisch als .hdr.is-stuck und kam nicht dagegen an. Der Blur
     sitzt jetzt nur noch auf der Kapsel .hdr__in. 07.09.2026 */
  .hdr.is-stuck .hdr__in{min-height:62px}
  .hdr__in{transition:min-height .25s var(--ease)}
  .hdr__logo svg{transition:height .25s var(--ease)}
  .hdr.is-stuck .hdr__logo svg{height:26px}
}

/* Ohne Bewegung bleibt alles sichtbar und ruhig. */
@media (prefers-reduced-motion:reduce){
  .wort,.duty__col li{opacity:1;transform:none}
  .illu img{clip-path:none;transform:none}
  .hero__glow,.phero__glow{display:none}
  .fortschritt{display:none}
}

/* ------------------------------------------------------- Bildkarte
   Die vier Gruppen, aus denen unsere Sitzwachen kommen. Bild oben, Text
   darunter. Beim Zeigen faehrt das Bild langsam heran, der Rahmen bleibt
   stehen, damit nichts im Raster springt. */
.qcard{padding:0;overflow:hidden;gap:0}
.qcard__bild{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--mist-2);
}
.qcard__bild img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.qcard__bild::after{
  content:"";position:absolute;inset:auto 0 0 0;height:45%;
  background:linear-gradient(transparent,rgba(5,43,89,.14));pointer-events:none;
}
.qcard:hover .qcard__bild img{transform:scale(1.06)}
.qcard__bd{padding:clamp(1.15rem,2.2vw,1.4rem);display:grid;gap:.55rem;align-content:start}
.qcard__bd .h3{font-size:1.1rem;line-height:1.25}
.qcard__bd p{color:var(--muted);font-size:.94rem;line-height:1.55}
@media (prefers-reduced-motion:reduce){.qcard__bild img{transition:none}}

/* Hinweis unter einem Kartenraster mit KI-Bildern. Der Balken an den
   Bildunterschriften greift dort nicht, es gibt keine figcaption. */
.ki-zeile{
  margin-top:1.1rem;font-size:.82rem;color:var(--muted);
  display:flex;align-items:center;gap:.5rem;
}
.ki-zeile::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange);flex:none}

/* ============================================================
   Effektschicht (06.09.2026, zweiter Durchgang)

   Emres Ansage: „unglaublich modern und hochwertig". Alles hier ist
   trotzdem an drei Bedingungen gebunden:
   - Markenfarben, keine fremden Verläufe. Curawel bleibt hell.
   - Jede Bewegung hat einen Grund. Nichts dreht sich, weil es geht.
   - Alles Bewegte steht in @media (prefers-reduced-motion:no-preference)
     oder prüft es im Skript.
   ============================================================ */

@property --winkel{syntax:"<angle>";initial-value:0deg;inherits:false}

/* --------------------------------------------------- Seitenwechsel
   Echte Übergänge zwischen zwei Seiten. Kopfzeile und Handyleiste
   bleiben stehen, nur der Inhalt wird getauscht. Browser ohne
   Unterstützung springen wie bisher hart um, das ist kein Verlust. */
@view-transition{navigation:auto}
.hdr{view-transition-name:kopfzeile}
.topbar{view-transition-name:oberleiste}
.dock{view-transition-name:handyleiste}
.ftr{view-transition-name:fusszeile}

/* --------------------------------------------------------- Korn
   Eine sehr feine Störung über der ganzen Seite. Nimmt großen
   Farbflächen das Digitale und lässt sie gedruckt wirken. */
.korn{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ------------------------------------------------ Lichtfeld im Kopf
   Vier Wolken statt zwei, dazu ein Raster, das mit dem Scrollen
   wandert. Der Held bekommt damit Tiefe statt einer flachen Fläche. */
.hero__glow::before,.phero__glow::before{background:rgba(30,112,187,.20)}
.hero__glow::after,.phero__glow::after{background:rgba(235,75,0,.13)}
.hero__glow{
  --tiefe:0;
  transform:translate3d(0,calc(var(--tiefe) * 40px),0);
}
.hero__glow > i{
  position:absolute;border-radius:50%;filter:blur(80px);display:block;
}
.hero__glow > i:nth-child(1){
  width:30vw;height:30vw;min-width:260px;min-height:260px;
  left:38%;top:-6vw;background:rgba(177,208,235,.55);
}
.hero__glow > i:nth-child(2){
  width:22vw;height:22vw;min-width:200px;min-height:200px;
  right:22%;bottom:-4vw;background:rgba(5,43,89,.10);
}

/* Der Held selbst wandert beim Scrollen langsamer als die Seite. */
.hero__copy{--tiefe:0;transform:translate3d(0,calc(var(--tiefe) * -28px),0)}
.shift{--tiefe:0}

/* ------------------------------------------------------ Lichtkegel
   Karten folgen dem Zeiger mit einem weichen Schein. Das ist der
   Effekt, der eine Kachel teuer aussehen lässt, und er kostet nichts. */
.linkcard,.mcard,.way,.job,.gruppe,.voice,.perk,.duty__col,.qcard,.faq details{
  --mx:50%;--my:50%;
}
.linkcard::after,.mcard::after,.way::after,.job::after,
.gruppe::after,.qcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx) var(--my),
             rgba(30,112,187,.11),transparent 62%);
  opacity:0;transition:opacity .3s var(--ease);z-index:0;
}
.linkcard:hover::after,.mcard:hover::after,.way:hover::after,.job:hover::after,
.gruppe:hover::after,.qcard:hover::after{opacity:1}
.linkcard > *,.mcard > *,.way > *,.job > *,.gruppe > *,.qcard > *{position:relative;z-index:1}
.model .mcard::before{z-index:2}         /* der Verbindungspfeil bleibt oben */

/* ------------------------------------------- Wanderende Verlaufskante
   Nur auf den drei Karten, die etwas erklären sollen: die Dienstplan-
   Karte, die aktive Berufsgruppe und der Hinweis auf die Pflegegruppe. */
.kante-lebt{position:relative;isolation:isolate}
.kante-lebt::before{
  content:"";position:absolute;inset:-1.5px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--winkel),
    var(--sky),var(--blue),var(--orange),var(--blue),var(--sky));
  opacity:.85;
}

/* ------------------------------------------------------- Zifferrolle
   Große Zahlen rollen wie ein Zählwerk ein. Der Text bleibt dabei im
   HTML stehen, das Skript baut die Rollen nur darüber. */
.rolle{display:inline-flex;align-items:baseline;font-variant-numeric:tabular-nums}
.ziffer{display:inline-block;height:1em;overflow:hidden;line-height:1;font-variant-numeric:tabular-nums}
.ziffer__band{display:block;will-change:transform}
.ziffer__band span{display:block;height:1em;line-height:1;text-align:center}

/* --------------------------------------------- Text hellt sich auf
   Die Einleitung unter einer Überschrift ist zuerst blass und wird
   Wort für Wort dunkler, während man sie erreicht. Das führt das Auge
   durch den Satz, statt ihn nur hinzustellen. */
/* Der erste Wurf liess den Text bei 55 % Deckkraft in Linienfarbe
   starten. Das war unlesbar, und genau das ist Emre am 07.09.2026 am
   Bildschirmfoto aufgefallen. Jetzt andersherum: der Satz steht von
   Anfang an in seiner normalen Farbe und wird beim Lesen kraeftiger.
   Kein Zustand ist schlechter lesbar als vorher. */
.w{transition:color .4s linear}
.aufhellen .w{color:var(--muted)}
.aufhellen .w.an{color:var(--navy)}

/* ------------------------------------------------------ Schrittleiste
   Der Ablauf in fünf Schritten bekommt eine Schiene, die sich beim
   Scrollen füllt. Man sieht, wo man im Ablauf steht. */
.steps{position:relative}
.steps::before{
  content:"";position:absolute;left:19px;top:1.6rem;bottom:1.6rem;width:2px;
  background:var(--line);
}
.steps::after{
  content:"";position:absolute;left:19px;top:1.6rem;width:2px;
  height:calc(var(--fortschritt,0) * (100% - 3.2rem));
  background:linear-gradient(var(--blue),var(--orange));
  transition:height .25s linear;
}
.step{position:relative;z-index:1}
.step__no{transition:background-color .3s var(--ease),color .3s var(--ease),
                     border-color .3s var(--ease),transform .3s var(--ease)}
.step.erreicht .step__no{
  background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.06);
}
@media (max-width:640px){.steps::before,.steps::after{display:none}}

/* ------------------------------------------------- Laufband Regionen
   Die neun Bundesländer laufen einmal durch. Sagt in einer Zeile, was
   sonst neun Karten sagen müssten. */
.band{
  --tempo:34s;
  overflow:hidden;position:relative;
  border-block:1px solid var(--line);padding-block:1.15rem;
  margin-block:clamp(2rem,4vw,3rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.band__spur{display:flex;width:max-content;gap:0}
.band__satz{display:flex;gap:clamp(1.5rem,3vw,3rem);padding-right:clamp(1.5rem,3vw,3rem)}
.band b{
  font-family:var(--schrift-display);font-weight:600;
  font-size:clamp(1.1rem,.9rem + .7vw,1.5rem);letter-spacing:-.02em;
  color:var(--blue);white-space:nowrap;display:flex;align-items:center;gap:.7rem;
}
.band b::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}

/* -------------------------------------------------- Inhaltsverzeichnis
   Auf langen Wissensseiten wandert die Markierung mit. */
/* Das Inhaltsverzeichnis steht in der .prose und hat dadurch den
   orangen Unterstrich fuer Fliesstext-Links mitbekommen. Sechs
   unterstrichene Zeilen untereinander sehen aus wie ein Fehler, hier
   markiert der Balken links, wo man ist. */
.toc a{
  position:relative;padding-left:.9rem;padding-bottom:0;
  background-image:none;transition:color .2s var(--ease);
}
.toc a::before{
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:3px;height:0;border-radius:2px;background:var(--orange);
  transition:height .25s var(--ease);
}
.toc a.hier{color:var(--blue);font-weight:700}
.toc a.hier::before{height:1.1em}

/* -------------------------------------------------- Navigationsreiter
   Ein Strich, der zwischen den Punkten mitwandert, statt unter jedem
   Punkt einzeln aufzutauchen. */
.hdr__nav{position:relative}
.hdr__reiter{
  position:absolute;bottom:.05rem;height:2px;border-radius:2px;
  background:var(--orange);opacity:0;pointer-events:none;
  transform:translateX(var(--x,0)) ;width:var(--w,0);
  transition:transform .32s cubic-bezier(.22,.61,.36,1),
             width .32s cubic-bezier(.22,.61,.36,1),opacity .2s var(--ease);
}
.hdr__nav.zeigt .hdr__reiter{opacity:1}
.hdr__nav.zeigt > ul > li > a::after{opacity:0}

/* --------------------------------------------------------- Knöpfe
   Der Hauptknopf zieht den Zeiger leicht an. Nur an echten Zeigern,
   am Finger gibt es kein Darüberfahren. */
.btn{--zug-x:0px;--zug-y:0px}
@media (hover:hover) and (pointer:fine){
  .btn:not(.btn--ghost):not(.btn--outline-white){
    transform:translate3d(var(--zug-x),var(--zug-y),0);
  }
  .btn:not(.btn--ghost):not(.btn--outline-white):hover{
    transform:translate3d(var(--zug-x),calc(var(--zug-y) - 1px),0);
  }
}

/* ------------------------------------------------------ Bildparallaxe
   Das Bild im Rahmen wandert langsamer als der Rahmen. Der Rahmen
   selbst bleibt ruhig, es springt also nichts im Raster. */
.illu img{--par:0}

/* =========== ab hier nur mit erwünschter Bewegung =================== */
@media (prefers-reduced-motion:no-preference){

  .hero__glow > i:nth-child(1){animation:wolke-b 24s ease-in-out infinite alternate}
  .hero__glow > i:nth-child(2){animation:wolke-a 29s ease-in-out infinite alternate}

  .kante-lebt::before{animation:kante-dreht 7s linear infinite}
  @keyframes kante-dreht{to{--winkel:360deg}}

  .band__spur{animation:band var(--tempo) linear infinite}
  @keyframes band{to{transform:translateX(-50%)}}
  .band:hover .band__spur{animation-play-state:paused}

  .illu.is-in img{
    transform:translate3d(0,calc(var(--par) * 1px),0) scale(1.08);
    transition:clip-path .95s cubic-bezier(.22,.61,.36,1);
  }

  .ziffer__band{transition:transform 1.35s cubic-bezier(.16,1,.3,1)}

  /* Seitenwechsel: der alte Inhalt sinkt ab, der neue kommt von unten. */
  ::view-transition-old(root){animation:vt-weg .26s ease-in both}
  ::view-transition-new(root){animation:vt-her .42s cubic-bezier(.22,.61,.36,1) both}
  @keyframes vt-weg{to{opacity:0;transform:translateY(-10px)}}
  @keyframes vt-her{from{opacity:0;transform:translateY(14px)}}
}

@media (prefers-reduced-motion:reduce){
  .korn{display:none}
  .band__spur{animation:none;transform:none}
  .aufhellen .w{color:var(--muted)}
  .kante-lebt::before{background:var(--blue)}
  @view-transition{navigation:none}
}

/* ============================================================
   Effektschicht, zweiter Teil
   ============================================================ */

@property --schweb{syntax:"<length>";initial-value:0px;inherits:false}
@property --zieh{syntax:"<number>";initial-value:1;inherits:true}

/* ------------------------------------------------- Neigung im Held
   Die Dienstplan-Karte kippt leicht zum Zeiger. Sie ist das eine
   Element, an das man sich erinnern soll, deshalb bekommt nur sie das.
   Schweben und Neigen laufen in derselben Eigenschaft, sonst
   ueberschreibt eins das andere. */
.shift{
  --rx:0deg;--ry:0deg;
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--schweb));
  transform-style:preserve-3d;
  will-change:transform;
}
.shift__top,.shift__rail,.shift__meta{transform:translateZ(18px)}
.shift__cap{transform:translateZ(8px)}

/* ------------------------------------------------- FAQ klappt weich
   Seit Chrome 131 und Safari 26 laesst sich der Inhalt eines details
   animieren. Wo das fehlt, klappt es wie bisher hart auf, das ist
   kein Verlust. */
@supports (interpolate-size: allow-keywords){
  html{interpolate-size:allow-keywords}
  .faq details::details-content{
    block-size:0;overflow:hidden;opacity:0;
    transition:block-size .38s var(--ease),opacity .3s var(--ease),
               content-visibility .38s allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto;opacity:1}
}
.faq summary::after{transition:transform .3s var(--ease)}

/* --------------------------------------------------- Ladeschimmer
   Solange ein Bild noch nicht da ist, laeuft ein heller Streifen ueber
   den Platz. Sagt: hier kommt noch etwas, statt eine graue Flaeche. */
.illu{position:relative;background:var(--mist-2)}
.illu::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;display:none;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.75) 50%,transparent 80%);
  background-size:200% 100%;
}
.illu.is-in:not(.geladen)::before{display:block}
.illu img,.illu figcaption{position:relative;z-index:1}

/* ------------------------------------------- Linien, die sich ziehen
   Der Strich vor der Auszeichnungszeile und der Akzent unter jeder
   H2 wachsen, sobald der Abschnitt erreicht ist. */
.eyebrow::before{transform-origin:left center;transform:scaleX(var(--zieh,1))}
.head > .h2{position:relative;padding-bottom:.55rem}
.head > .h2::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;border-radius:2px;
  width:clamp(48px,7vw,86px);
  background:linear-gradient(90deg,var(--orange),var(--blue));
  transform-origin:left center;transform:scaleX(var(--zieh,1));
}
.head--center > .h2{padding-bottom:.7rem}
.head--center > .h2::after{left:50%;translate:-50% 0;transform-origin:center}

/* ------------------------------------------------------- Fusszeile
   Eine feine Markenlinie oben statt einer grauen Kante. */
.ftr{position:relative;border-top:0}
.ftr::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--orange),var(--sky),var(--blue));
  background-size:280% 100%;
}

@media (prefers-reduced-motion:no-preference){
  .shift{animation:schweben 7s ease-in-out infinite}
  .shift.is-filled{animation:none}
  @keyframes schweben{50%{--schweb:-8px}}

  .illu.is-in:not(.geladen)::before{animation:schimmer 1.6s linear infinite}
  @keyframes schimmer{to{background-position:-200% 0}}

  /* Nur was in einem .rise steckt, faengt bei 0 an. Alles andere bleibt
     bei 1, sonst bliebe eine Linie unsichtbar, weil ihr Behaelter nie
     ein is-in bekommt (etwa die Auszeichnungszeile im Held). */
  .rise .eyebrow,.rise > .h2,.rise .h2{--zieh:0}
  .rise.is-in .eyebrow,.rise.is-in > .h2,.rise.is-in .h2{
    --zieh:1;transition:--zieh .7s cubic-bezier(.22,.61,.36,1) .12s;
  }

  .ftr::before{animation:ftr-band 14s linear infinite}
  @keyframes ftr-band{to{background-position:280% 0}}
}

@media (prefers-reduced-motion:reduce){
  .shift{transform:none;animation:none}
  .illu::before{display:none}
  .eyebrow,.h2{--zieh:1}
  .ftr::before{animation:none}
}

/* ============================================================
   Nachbesserung 07.09.2026 (Emres Rückmeldung am Bildschirmfoto)

   Drei Sachen waren falsch:
   1. Die Verlaufskante hat die Dienstplan-Karte nicht umrandet, sondern
      ausgefüllt. Ein Kind mit z-index:-1 liegt in einem eigenen
      Stapelkontext über dem Hintergrund seines Elternteils, nicht
      darunter. Jetzt echte Verlaufskante über background-clip.
   2. Die Einleitung im Held hing an der Scroll-Aufhellung und stand
      deshalb oben halb blass da. Text über der Falz muss sofort lesbar
      sein. Sie wird jetzt beim Laden eingeblendet, nicht beim Scrollen.
   3. Der Kopfknopf hatte eine doppelte Lücke: der Knopf ist ein
      Flex-Kasten mit gap, und „Sitzwache " im eigenen span wurde
      dadurch zum eigenen Flex-Kind.
   ============================================================ */

/* ----------------------------------------- 1. echte Verlaufskante */
.kante-lebt::before{content:none}
.kante-lebt{
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    conic-gradient(from var(--winkel),
      var(--sky),var(--blue),var(--orange),var(--blue),var(--sky)) border-box;
}

/* ------------------------------- 3. Knopfbeschriftung ohne Lücke */
.btn__kurz{display:inline}
.btn__lang{display:none}
@media (min-width:430px){
  .dock .btn__lang{display:inline}
  .dock .btn__kurz{display:none}
}

/* ============================================================
   Kopfzeile
   Vorher eine weiße Leiste mit einer Linie darunter. Jetzt eine
   milchige Schicht, unter der der Inhalt sichtbar durchzieht, mit
   einer Markenhaarlinie, sobald man gescrollt hat.
   ============================================================ */
.hdr{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(1.7) blur(16px);
          backdrop-filter:saturate(1.7) blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.hdr::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue) 22%,
             var(--orange) 55%,var(--sky) 78%,transparent);
  opacity:0;transition:opacity .35s var(--ease);pointer-events:none;
}
.hdr.is-stuck::after{opacity:1}
.hdr.is-stuck{
  background:rgba(255,255,255,.9);
  box-shadow:0 14px 34px -26px rgba(5,43,89,.55);
}
.hdr__logo{transition:transform .25s var(--ease)}
.hdr__logo:hover{transform:scale(1.03)}

/* Die Punkte bekommen Luft und einen weichen Grund beim Zeigen. */
.hdr__nav > ul > li > a{
  padding:.5rem .62rem;border-radius:999px;
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.hdr__nav > ul > li > a:hover{background:var(--mist-2);color:var(--blue)}
.hdr__nav > ul > li > a[aria-current]{color:var(--blue)}
.hdr__reiter{bottom:-.15rem}

/* Rechts: die Nummer als Knopf mit eigenem Zeichen, dann ein Trenner,
   dann der Hauptknopf. Vorher standen beide gleichrangig nebeneinander. */
.hdr__act{gap:.6rem}
.hdr__tel{
  gap:.6rem;padding:.35rem .95rem .35rem .35rem;border-radius:999px;
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.hdr__tel:hover{background:var(--mist-2);color:var(--blue)}
.hdr__tel svg{
  width:36px;height:36px;padding:9px;border-radius:50%;
  background:var(--mist-2);color:var(--orange);flex:none;
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.hdr__tel:hover svg{background:#fff;transform:rotate(-10deg) scale(1.05)}
.hdr__tel::after{
  content:"";width:1px;height:24px;margin-left:.35rem;
  background:var(--line);flex:none;
}
.hdr__act .btn{box-shadow:0 10px 24px -14px rgba(235,75,0,.85)}
.hdr__act .btn:hover{box-shadow:0 14px 28px -12px rgba(235,75,0,.7)}

@media (prefers-reduced-motion:no-preference){
  /* Die Haarlinie wandert langsam, damit die Kopfzeile lebt, ohne
     dass sich etwas bewegt, das man lesen muss. */
  .hdr.is-stuck::after{
    background-size:220% 100%;
    animation:kopfband 12s linear infinite;
  }
  @keyframes kopfband{to{background-position:220% 0}}

  /* 2. Die Einleitung im Held kommt Wort für Wort, gleich nach der
     Überschrift, und ist danach vollständig lesbar. */
  .lead.is-getippt .wort{animation-delay:calc(330ms + var(--i) * 21ms)}
}

/* ------------------------------------------------ Kopfzeile, Platz
   Die neue Telefon-Kachel hat die Zeile zwischen 1280 und 1600 px
   ueberlaufen lassen. Sechs Punkte in deutscher Sprache, eine
   Rufnummer und ein Knopf passen nicht in 1280 px Inhaltsbreite.

   Drei Stellschrauben statt einer groben: die Kopfzeile darf breiter
   werden als der Inhalt darunter, die Punkte ruecken enger zusammen,
   und die Klappnavigation kommt erst ab 1300 px. Die Rufnummer bleibt
   sichtbar, sie ist fuer eine Pflegedirektorin der kuerzeste Weg. */

.hdr__nav > ul{gap:clamp(.28rem,.45vw,.58rem)}
.hdr__nav > ul > li > a{padding:.5rem .4rem;font-size:.89rem}
.hdr__logo svg{height:26px}
.hdr__tel{gap:.5rem;padding:.3rem .7rem .3rem .3rem}
.hdr__tel svg{width:32px;height:32px;padding:8px}
.hdr__tel::after{height:22px;margin-left:.2rem}
.hdr__act{gap:.5rem}

@media (min-width:1240px) and (max-width:1299px){
  .hdr__nav,.hdr__act{display:none}
  .burger{display:inline-flex}
  .dock{display:flex}
  body{padding-bottom:76px}
}
@media (min-width:1300px){
  .hdr__nav{display:block}
  .hdr__act{display:flex}
}

/* ============================================================
   Aufbau nach cwgroup.at (07.09.2026)

   Emre: „die Website von CWG ist viel attraktiver, schönerer Aufbau,
   schönere Effekte". An der Live-Seite gemessen und übernommen wurde
   der Aufbau, nicht das Aussehen. cwgroup ist dunkelblau, Curawel
   bleibt hell (Emres Regel vom 3.8.2026).

   Von dort geholt:
   - Kopfzeile als schwebende Kapsel statt durchgehender Leiste
     (dort: rounded-full, bg-white/90, blur 12px, Schatten
      rgba(1,32,55,.28) 0 12px 30px -16px, Höhe 68px)
   - Auszeichnungszeile als Chip mit Punkt statt Strich davor
     (dort: bg-white/10, ring-1, px-4 py-1.5, 12px, 1,8px Laufweite)
   - Überschrift zeilenweise in drei Farben statt einfarbig
     (dort: weiß, #ea5b0c, #7fb2d9, je Zeile ein eigener Block)
   - Ein Netz aus Punkten und Linien hinter dem Held
   ============================================================ */

/* -------------------------------------------- Kopfzeile als Kapsel */
.hdr{
  background:transparent;border-bottom:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding-block:.45rem;
}
.hdr::after{display:none}
.hdr__in{
  /* Schmaler als der Inhalt darunter, sonst liest sich die Kapsel wie
     eine durchgehende Leiste. Auf cwgroup.at sind links und rechts
     deutlich Grund zu sehen, das macht den schwebenden Eindruck. */
  /* 1200 statt 1280: die Kapsel ist die .wrap selbst, mit der vollen
     Inhaltsbreite waere links und rechts nur der Aussenabstand frei und
     sie laege bei 1300 px fast Kante an Kante. */
  max-width:1200px;
  width:calc(100% - 2 * var(--gut));   /* laesst links und rechts Grund frei */
  border-radius:999px;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
          backdrop-filter:saturate(1.6) blur(12px);
  border:1px solid var(--line);
  box-shadow:0 12px 30px -16px rgba(5,43,89,.28);
  min-height:auto;
  padding:.4rem .4rem .4rem 1.2rem;
  gap:1.1rem;
  transition:padding .28s var(--ease),box-shadow .28s var(--ease),
             background-color .28s var(--ease),border-color .28s var(--ease);
}
.hdr.is-stuck{background:transparent;box-shadow:none}
.hdr.is-stuck .hdr__in{
  padding-block:.28rem;
  background:rgba(255,255,255,.95);
  border-color:var(--blue-mid);
  box-shadow:0 16px 36px -18px rgba(5,43,89,.4);
}
.hdr__act .btn{border-radius:999px}
.hdr__reiter{bottom:.28rem}

/* ------------------------------------- Auszeichnungszeile als Chip */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.42rem .95rem;border-radius:999px;
  background:var(--mist-2);border:1px solid var(--line);
  color:var(--blue-ink);
  font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  line-height:1.35;
}
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--orange);flex:none;transform:none;
}
/* Ein inline-flex-Kasten in einem Raster wird trotzdem gestreckt. Ohne
   justify-self zog sich der Chip ueber die ganze Spalte, statt seinen
   Text zu umschliessen. Im Held fiel es nicht auf, weil .hero__copy und
   .phero__in justify-items:start setzen, in jedem .head aber schon. */
.eyebrow{justify-self:start;align-self:start}
.head--center .eyebrow,.eyebrow--center{justify-self:center;align-self:center}
.section--navy .eyebrow{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:var(--sky);
}
.section--navy .eyebrow::before{background:var(--orange)}
/* Der Chip ist selbst ein Kasten, ein zusaetzlicher Zeilenumbruch
   darin sieht kaputt aus. Auf schmalen Geraeten darf er umbrechen. */
@media (max-width:520px){.eyebrow{border-radius:14px}}

/* ---------------------------------- Ueberschrift, Satz fuer Satz
   Erster Wurf am 07.09.2026: drei Farbbloecke, dabei war „Wir schicken"
   und „die Sitzwache." ein einziger Satz, in zwei Farben zerschnitten.
   Emre zu Recht: „das ergibt irgendwie keinen Sinn."

   Zweiter Wurf war der Farbwechsel innerhalb des Satzes. Der Umbruch
   fiel genau auf die Farbgrenze, es sah also identisch aus. Jetzt gilt:
   **ein Satz, eine Farbe.** Der zweite Satz darf umbrechen, das faellt
   nicht auf, weil er durchgehend orange ist. Navy fuer das Problem,
   Orange fuer die Antwort.

   Dazu kleiner gesetzt als der Rest der H1-Skala. Bei 65,6 px passte
   „Jemand muss bleiben." nicht in die 617 px breite Textspalte und
   brach um, die Ueberschrift lief auf vier Zeilen und hat alles
   darunter nach unten geschoben. */
.h1--zeilen{display:grid;gap:.04em;max-width:none}
.hero .h1--zeilen{
  font-size:clamp(2.05rem,1rem + 2.8vw,3.25rem);
  /* .hero .h1{max-width:14ch} ist spezifischer als .h1--zeilen und hat
     die Zeilen bei 420 px gekappt, obwohl 617 px Spalte da sind. Bei
     eigenen Zeilen bestimmt der Satz den Umbruch, nicht eine Zeichenzahl. */
  max-width:none;
}
.h1 .zeile{display:block}
.zeile--blau{color:var(--blue)}
.zeile--navy{color:var(--navy)}
.zeile--orange{color:var(--orange)}

/* Ein Lichtstreifen im Text waere hier schoen, geht aber nicht:
   background-clip:text faerbt nur das Element mit dem Hintergrund, die
   fuer die Wortanimation eingesetzten Spans darin wuerden unsichtbar.
   Die Zeile bleibt deshalb einfarbig, die Bewegung macht das
   Wort-fuer-Wort-Einblenden. */

/* ------------------------------------------- Netz hinter dem Held */
.netz{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.9;
}

@media (prefers-reduced-motion:no-preference){
}

/* ---------------------------------------- Rufnummer in der Kapsel
   Sechs deutsche Menuepunkte, eine ausgeschriebene Rufnummer und ein
   Knopf passen nicht in eine 1280er Kapsel. Bei 1440 hing der Knopf
   61 px aus der Kapsel heraus. Die Nummer steht deshalb ausgeschrieben
   in der Einstiegsleiste darueber und in der Kapsel als Waehl-Knopf mit
   der Nummer als Beschriftung. Sie bleibt damit ueberall erreichbar:
   oben als Text, in der Kapsel ein Klick, in der Fusszeile, auf der
   Kontaktseite und am Handy in der festen Leiste. */
.hdr__tel-nr{display:none}
.hdr__tel{padding:.3rem;gap:0}
.hdr__tel::after{display:none}
.hdr__tel svg{width:38px;height:38px;padding:10px}

.topbar__tel{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;color:#fff;border-bottom:0;
}
.topbar__tel svg{width:15px;height:15px;color:var(--orange);flex:none}
.topbar__tel:hover{color:var(--sky)}

/* -------------------------------------------- Held wieder enger
   Die schwebende Kapsel und der Chip haben zusammen rund 40 px
   dazugegeben. Sichtbar wurde das erst im Zusammenspiel: Emre am
   07.09.2026 „jetzt ist irgendwie alles nach unten geschoben".
   Der Anlauf oben ist deshalb kuerzer, unten bleibt er wie er war. */
.hero__in{padding-top:clamp(1.35rem,2.6vw,2.15rem)}
.phero__in{padding-top:clamp(1.6rem,3.2vw,2.75rem)}

/* Der Held traegt vier Ueberschriftenzeilen, die Abstaende darin
   duerfen deshalb enger sein. Ziel: die Kennzahlenzeile bleibt auf
   einem 1440x820-Bildschirm ueber der Falz. */
.hero__copy{gap:1.1rem}

/* ============================================================
   Hintergrund bis ganz nach oben (07.09.2026)

   Emres Wunsch. Die Kapsel soll auf dem Helden schweben, nicht auf
   einem weissen Streifen darueber. Der Held wird deshalb um die Hoehe
   der Kopfzeile nach oben gezogen und bekommt denselben Betrag als
   Innenabstand zurueck. Sein Hintergrund, das Zeitraster, die
   Farbwolken und das Punktnetz reichen damit bis unter die Kapsel.

   Die Kopfzeile ist durchsichtig und klebt (sticky) mit z-index 90,
   sie liegt also darueber. Die dunkle Einstiegsleiste bleibt
   unberuehrt, der Held beginnt genau an ihrer Unterkante.

   --kopfhoehe misst das Skript, der Ersatzwert 72px traegt den Fall
   ohne JavaScript. */
main > .hero:first-child,
main > .phero:first-child{
  margin-top:calc(var(--kopfhoehe,72px) * -1);
  padding-top:var(--kopfhoehe,72px);
}

/* ============================================================
   Durchgang 07.09.2026, zweiter Teil des Tages
   Aus der Prüfung der Startseite auf der Vorschau-Adresse. Was hier
   steht, ist Raum und Rhythmus, nicht Farbe: die Kapitel waren nicht
   als Kapitel erkennbar, die Köpfe nutzten die halbe Breite, und am
   Handy stand die Seite fünfzehn Bildschirme hoch.
   ============================================================ */

/* -------------------------------------------- Kapitel statt Löcher
   171 px zwischen zwei Abschnitten, dazu ein Wechsel von #ffffff auf
   #f2f7fc, den man nicht sieht: der Abstand las sich als Loch, nicht
   als Kapitelwechsel. Der Abstand wird kürzer, die graue Fläche einen
   Tick kräftiger, und die weichen Kanten decken nicht mehr fast den
   halben Abstand ab. Beide Farben sind vorhandene Token, gemischt,
   damit keine dritte Fläche im System entsteht. */
.section{padding-block:clamp(2.75rem,3.6vw,4rem)}   /* 44 bis 64px */
.section--mist{background:var(--mist)}
@supports (background:color-mix(in srgb,#000,#fff)){
  .section--mist{background:color-mix(in srgb,var(--mist) 55%,var(--mist-2))}
}
.section--mist::before,.section--mist::after{height:28px}

/* --------------------------------------------- Kopf mit rechter Spalte
   Eyebrow, H2 und Einleitung standen auf 55 % der Inhaltsbreite, rechts
   blieb in fünf Kapiteln dieselbe leere Spalte. Wo ein Kapitel einen
   weiterführenden Link hat, steht er jetzt dort oben statt unter den
   Karten. Unter 960 px bleibt alles einspaltig wie bisher. */
@media (min-width:960px){
  .head--zwei{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    column-gap:clamp(1.5rem,4vw,3.5rem);
  }
  .head--zwei > .eyebrow{grid-column:1}
  .head--zwei > .h2{grid-column:1}
  .head--zwei > .lead{grid-column:1}
  .head--zwei > .head__act{
    grid-column:2;grid-row:2;justify-self:end;align-self:end;
    padding-bottom:.55rem;                 /* auf die Grundlinie der H2 */
  }
}
.head__act{display:flex;flex-wrap:wrap;gap:.75rem}

/* ------------------------------------------- Kopf kommt deutlicher
   14 px Weg sind unter einer 52-px-Überschrift nicht zu sehen. Nur die
   Kapitelköpfe bekommen mehr, Karten und Fliesstext bleiben bei 14. */
@media (prefers-reduced-motion:no-preference){
  .head.rise{transform:translateY(22px)}
  .head.rise.is-in{transform:none}
}

/* ------------------------------------- Untermenü hängt an der Kapsel
   Das Panel war eine eckige weisse Fläche unter einer runden Kapsel und
   klebte direkt an ihr. Jetzt derselbe Radius, derselbe Schatten, und
   ein Abstand, der die Kapsel als eigenes Element stehen lässt. */
/* Der Bezugspunkt ist das <li>, nicht die Kapsel: das <li> endet rund
   11 px ueber der Kapselunterkante, deshalb 1,5rem statt der frueheren
   0,35rem: rund 7 px Luft unter der Kapsel. Die Bruecke fuer die Maus deckt den ganzen Abstand ab. */
.subnav{
  margin-top:1.5rem;border-radius:18px;
  box-shadow:0 12px 30px -16px rgba(5,43,89,.28),0 22px 44px -20px rgba(5,43,89,.3);
  transform-origin:top center;
}
.subnav::before{top:-1.55rem;height:1.55rem}

/* ------------------------------------------ Ein Link unter 4,5 : 1
   #1e70bb auf dem Hinweisgrund #e8f1f9 sind 4,49 : 1, AA verlangt 4,5.
   Nur im Hinweiskasten die tiefere Stufe, sonst bleibt das Linkblau
   wie es ist (auf Weiss sind es 5,13 : 1). */
.note a{color:var(--blue-ink)}
.note a:hover{color:var(--navy)}

/* ------------------------------------------------- Korn nur am Tisch
   Ein bildschirmfüllender Layer mit mix-blend-mode wird bei jedem
   Scroll-Bild neu zusammengerechnet. Am Handy ist die Textur bei 3,2 %
   Deckkraft ohnehin nicht zu sehen, dort kostet sie nur. */
@media (max-width:767px){.korn{display:none}}

/* ============================================================
   Handy: die Seite war fünfzehn Bildschirme hoch
   ============================================================ */
@media (max-width:759px){
  /* Die sechs Stimmen standen untereinander. Als Bahn zum Wischen
     kosten sie eine Kartenhöhe statt sechs. Schnappen sorgt dafür,
     dass immer eine ganze Karte im Bild steht. */
  .voices{
    display:flex;gap:1rem;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    /* Der Rand der Bahn liegt am Bildschirmrand, nicht am Textrand:
       die nächste Karte lugt herein und sagt, dass es weitergeht. */
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
    padding-bottom:.5rem;
    scroll-padding-inline:var(--gut);
    scrollbar-width:thin;
  }
  .voices > *{flex:0 0 84%;scroll-snap-align:start}
}

@media (max-width:640px){
  /* Fusszeilen- und Menuelinks messen 28 px. Das erfüllt WCAG 2.2 AA
     (24 px), ist am Daumen aber knapp. Mit 10 px Innenabstand oben und
     unten sind es rund 44 px, das Aussehen ändert sich kaum. */
  .ftr li a{min-height:44px;padding-block:10px}
  .ftr ul{gap:0}
  .ftr__base ul{gap:.65rem 1.35rem}
  .ftr__base li a{min-height:0;padding-block:.35rem}
}

/* ---------------------------------------- Vertrauenszeile im Held
   Unter der Dienstplan-Karte standen 300 px Leere, links darunter die
   Kennzahlen: die Achse kippte. Dort steht jetzt, was eine
   Pflegedirektorin vor der ersten Anfrage wissen will. Alle drei
   Angaben sind belegt, sie stehen so in Fusszeile und Impressum.
   Offen und bewusst nicht behauptet: eine Reaktionszeit. */
.vertrauen{
  display:grid;gap:.7rem;width:100%;max-width:520px;justify-self:center;
  padding-top:1.1rem;border-top:1px solid var(--line);
}
.vertrauen li{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;line-height:1.5;color:var(--muted)}
.vertrauen svg{width:17px;height:17px;flex:none;margin-top:.22rem;color:var(--blue)}
.vertrauen a{font-weight:700}
@media (min-width:1000px){
  .hero__in{row-gap:1.4rem}
  .hero__copy{grid-column:1;grid-row:1 / span 2}
  .shift{grid-column:2;grid-row:1}
  .vertrauen{grid-column:2;grid-row:2;align-self:start}
}

/* ----------------------------------- Die Karte im Stimmen-Raster
   War ein Titel, ein Satz und ein Knopf, darunter 100 px Weiss in
   einer Rasterzelle, die so hoch ist wie ein Zitat daneben. */
.voice--cta{
  background:var(--paper);border-style:dashed;
  justify-items:start;gap:.8rem;
}
.voice--cta p{font-size:.97rem;line-height:1.55}
.voice--cta .btn{margin-top:auto}

/* ------------------------------------------- Fusszeile am Handy
   Fuenf Spalten untereinander sind am Telefon 2.300 px, der groesste
   einzelne Block der Seite. Die vier Linklisten stehen deshalb
   zweispaltig, der Block mit Anschrift und Kontakt bleibt breit. */
@media (max-width:759px){
  .ftr__grid{grid-template-columns:repeat(2,1fr);gap:1.75rem 1.25rem}
  .ftr__grid > :first-child{grid-column:1 / -1}
  .ftr li a{align-items:flex-start;line-height:1.35}
}

/* ------------------------------- Aufgaben und Grenzen zum Aufklappen
   Die beiden Listen sind zusammen 834 px hoch, am Telefon ein ganzer
   Bildschirm pro Spalte. Sie stehen deshalb in <details>: am Tisch
   immer offen und wie bisher, am Telefon zugeklappt. Das open-Attribut
   steht im HTML, ohne Skript bleibt also alles sichtbar. */
.duty__col > summary.duty__hd{
  list-style:none;cursor:default;
  /* summary ist von Haus aus list-item, das Raster braucht flex */
  display:flex;align-items:center;gap:.7rem;
}
.duty__col > summary.duty__hd::-webkit-details-marker{display:none}
@media (max-width:640px){
  .duty__col > summary.duty__hd{cursor:pointer}
  .duty__col > summary.duty__hd::after{
    content:"";margin-left:auto;flex:none;width:11px;height:11px;
    border-right:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange);
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .2s var(--ease);
  }
  .duty__col[open] > summary.duty__hd::after{transform:rotate(225deg) translate(-2px,-2px)}
}

/* ------------------------------------ Dienstplan-Karte: der Wechsel
   Der Balken fuellt sich, die Marke wechselt auf gruen, und die
   Beschriftung sprang bisher in einem Bild um. Sie blendet jetzt kurz
   aus und wieder ein. Ohne Bewegung passiert der Wechsel sofort. */
.shift [data-shift-state],.shift [data-shift-text]{
  transition:opacity .18s var(--ease);
}
.shift.is-tausch [data-shift-state],.shift.is-tausch [data-shift-text]{opacity:0}
@media (prefers-reduced-motion:reduce){
  .shift [data-shift-state],.shift [data-shift-text]{transition:none}
  .shift.is-tausch [data-shift-state],.shift.is-tausch [data-shift-text]{opacity:1}
}

/* -------------------------- Keine Staffelung in der Klappliste
   Am Telefon stecken die beiden Listen in <details>. Zugeklappt
   ueberspringt der Browser ihren Inhalt, eine Animation mit
   animation-fill-mode:both haelt dann ihren Anfangswert fest, und der
   ist opacity:0. Wenn beim Aufklappen aus irgendeinem Grund keine Zeit
   vergeht (Hintergrundtab, gedrosselte Bilder), stuenden dort sieben
   leere Zeilen. Die Staffelung ist ein Schmuck, der Inhalt ist es
   nicht: unter 640 px faellt der Schmuck weg. 07.09.2026 */
@media (max-width:640px){
  .duty__col.is-in li,.duty__col li{opacity:1;animation:none}
}