/* 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 */
/* ============================================================================
   CURAWEL Deutschland · eigenes Aussehen
   Angelegt 07.09.2026, von Grund auf, nicht mehr von Curawel AT kopiert.

   Emres Ansage, in drei Schritten praezisiert:
     1. „es ist ja trotzdem das Bild für die Sitzwache im Header, und generell
         ist alles aufgebaut auf Sitzwache."
     2. „curawel de ist eine eigene firma und sieht nicht gleich aus wie
         curawel at, es hat die gleichen logos und farben, agiert aber viel
         viel größer."
     3. „mach einfach eine komplett neue seite die einfach anders aussieht."

   Was bleibt: das Logo, die Markenfarben aus _Kern/tokens.css, Jost und Inter.
   Was geht: die ganze Formsprache von Curawel AT. Dort schwebt eine weisse
   Kapsel ueber weichen Farbwolken, Karten sind rund und heben sich an, alles
   ist hell und leicht. Das passt zu einer Gesellschaft, die einen Dienst
   besetzt.

   Diese hier besetzt vierzehn Berufe in vier Einsatzorten und ist ein
   Personaldienstleister fuer das ganze Gesundheitswesen. Ihre Formsprache
   heisst deshalb REGISTER:

     - Ein sichtbares Raster. Haarlinien gliedern die Seite wie ein Verzeichnis.
     - Nummerierte Kapitel. Wer ein Verzeichnis fuehrt, zaehlt.
     - Flaechen statt Schweben. Bloecke sitzen auf der Linie, sie fliegen nicht.
     - Kanten statt Rundungen. Radius 3px, nicht 999.
     - Navy als Flaeche, nicht nur als Schrift. Grosse dunkle Baender geben der
       Seite Gewicht.
     - Orange ist eine Markierung, keine Deko.

   Die Klassennamen sind dieselben wie vorher. Das ist Absicht: der Inhalt
   liegt in 64 Seiten und musste dafuer nicht angefasst werden.
   ============================================================================ */

/* -------------------------------------------------- Was aus dem Kern hier weg soll
   tokens.css und effekte.css kommen vor dieser Datei. Beide bringen Formen mit,
   die zu Curawel AT gehoeren. Hier wird ausdrueckich abgeraeumt, statt spaeter
   an zwanzig Stellen dagegen anzuschreiben. */
/* Lichtschein und Korn bleiben aus, die gehoeren zu Curawel AT. Das Netz
   (Canvas, driftende Punkte in Markenblau) bleibt an: es ist die einzige
   Bewegung im Held, haelt bei reduzierter Bewegung still und pausiert,
   sobald der Held aus dem Bild scrollt. */
.hero__glow,.phero__glow,.korn{display:none !important}
.netz{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* Das Netz laeuft auch im Kopf der Unterseiten. Bis 10.09.2026 war es dort
   aus, damit sahen 62 Seiten deutlich toter aus als die Startseite. */
.phero{position:relative}
.phero__in{position:relative;z-index:1}
.kante-lebt::before,.kante-lebt::after{content:none !important}
.kante-lebt{border:0;background:none}

:root{
  /* Eigene Namen fuer die Markenwerte, damit unten lesbarer Text steht. */
  --blau:var(--marke);
  --blau-tief:var(--marke-tief);
  --navy:var(--dunkel);
  --orange:var(--akzent);
  --orange-voll:var(--akzent-voll);
  --linie-kraeftig:#c3d8ea;

  /* Geometrie. Bis 10.09.2026 stand hier --kante:3px und fast alles war hart
     abgesetzt, das war die eigene "Register"-Idee der deutschen Seite. Emre
     will die Rundungen der Gruppe. Gemessen an den Live-Seiten von Curawel AT
     und der Pflegegruppe: Knoepfe 999px, Kleinteile 14px, Karten 20px, grosse
     Flaechen 28px. Das ist genau die Skala aus _Kern/tokens.css. */
  --kante:var(--r-s);          /* 14px, Kleinteile: Knopf-Umriss, Felder, Chips */
  --kopfhoehe:79px;            /* gemessen, klebende Kopfzeile ohne die Oberleiste */
  --kante-karte:var(--r-m);    /* 20px, Karten und Kachelraster */
  --kante-flaeche:var(--r-l);  /* 28px, Bilder und grosse Bloecke */
  --raster:88px;              /* Grundmass des sichtbaren Rasters */
  --spalte:1px solid var(--linie);
}

/* ============================================================================
   Grundlage
   ============================================================================ */
[hidden]{display:none !important}
html{color-scheme:light}
body{
  margin:0;
  background:var(--flaeche-2);
  color:var(--text);
  font-family:var(--schrift-text);
  font-size:1.0525rem;
  line-height:1.62;
  font-synthesis:none;
}
main{display:block}
img{height:auto}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
figure{margin:0}
table{border-collapse:collapse}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:#fff;padding:.85rem 1.25rem;font-weight:700;
}
.skip:focus{left:0}
:where(a,button,summary,input,select,textarea):focus-visible{
  outline:3px solid var(--orange);outline-offset:2px;
}

/* ---------------------------------------------------------------- Schrift */
.h1,.h2,.h3,.h4{
  font-family:var(--schrift-display);
  margin:0;text-wrap:balance;
}
.h1{
  font-size:clamp(2.3rem,1.1rem + 3.9vw,4.4rem);
  line-height:1.02;letter-spacing:-.035em;font-weight:700;color:var(--navy);
}
.h2{
  font-size:clamp(1.7rem,1.1rem + 2.1vw,2.75rem);
  line-height:1.08;letter-spacing:-.03em;font-weight:700;color:var(--navy);
}
.h3{font-size:clamp(1.12rem,1rem + .5vw,1.35rem);line-height:1.25;letter-spacing:-.018em;font-weight:600;color:var(--navy)}
.h4{font-size:1.02rem;line-height:1.3;letter-spacing:-.012em;font-weight:600;color:var(--navy)}

/* Die Auszeichnungszeile ist im Register kein Chip, sondern eine Marke am
   Rand: ein kurzer oranger Strich, dann Grossbuchstaben in Inter. */
.eyebrow{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--schrift-text);font-weight:700;
  /* 10.09.2026: von .735rem hoch. Das waren 11,8px, unter der 12px-Grenze. */
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange-voll);margin:0;
}
.eyebrow::before{
  content:"";width:26px;height:3px;background:var(--orange);flex:none;
}
.eyebrow--center{justify-content:center}
.head--center .eyebrow{justify-content:center}

.lead{font-size:clamp(1.04rem,.99rem + .34vw,1.22rem);line-height:1.58;color:var(--gedaempft);margin:0}
.muted{color:var(--gedaempft)}
.tight{max-width:64ch}

a{color:var(--blau-tief);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--orange-voll)}

.arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:.88rem;letter-spacing:.02em;
  color:var(--blau-tief);text-decoration:none;
}
.arrow::after{content:"→";transition:transform .2s var(--ease)}
a:hover .arrow::after,.arrow:hover::after{transform:translateX(4px)}

/* ============================================================================
   Knoepfe: eckig, flach, entschieden
   ============================================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.9rem 1.9rem;border-radius:var(--r-voll);
  font-family:var(--schrift-text);font-weight:700;font-size:.97rem;
  letter-spacing:.01em;text-decoration:none;white-space:nowrap;
  background:var(--orange-voll);color:#fff;border:2px solid var(--orange-voll);
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.btn:hover{background:var(--akzent-tief);border-color:var(--akzent-tief);color:#fff}
.btn svg{width:20px;height:20px;flex:none}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--linie-kraeftig)}
.btn--ghost:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn--white{background:#fff;color:var(--navy);border-color:#fff}
.btn--white:hover{background:var(--flaeche-2);border-color:var(--flaeche-2);color:var(--navy)}
.btn--outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--outline-white:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn--sm{min-height:44px;padding:.6rem 1.15rem;font-size:.9rem}
.btn--icon{padding:0;width:52px;flex:none}
.btns{display:flex;flex-wrap:wrap;gap:.75rem}

/* ============================================================================
   Kopf: eine durchgehende Leiste mit einer harten Linie darunter.
   Curawel AT hat dort eine schwebende Kapsel. Genau das soll es hier nicht sein.
   ============================================================================ */
.topbar{background:var(--navy);color:#fff;font-size:.82rem}
.topbar__in{
  display:flex;align-items:center;gap:1.25rem;min-height:40px;flex-wrap:wrap;
}
.topbar__label{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;
  color:var(--marke-hell);
}
.topbar__label svg{width:15px;height:15px}
.topbar a{color:#fff;text-decoration:none;font-weight:500}
.topbar a:hover{color:var(--marke-hell)}
.topbar__in > a{margin-left:auto}
.topbar__in > a ~ a{margin-left:0}
.topbar__app{font-weight:700}
@media (max-width:759px){.topbar{display:none}}

.hdr{
  position:sticky;top:0;z-index:90;
  background:var(--flaeche);
  border-bottom:1px solid var(--linie);
  transition:box-shadow .2s var(--ease);
}
.hdr.is-stuck{box-shadow:0 1px 0 var(--linie-kraeftig),0 12px 28px -22px rgb(var(--schatten-ton)/.5)}
.hdr__in{display:flex;align-items:center;gap:1.25rem;min-height:78px}
.hdr.is-stuck .hdr__in{min-height:66px}
.hdr__in{transition:min-height .2s var(--ease)}
.hdr__logo{display:flex;align-items:center;flex:none}
.hdr__logo svg{width:auto;height:30px}
.hdr.is-stuck .hdr__logo svg{height:26px}
.hdr__logo svg{transition:height .2s var(--ease)}

.hdr__nav{display:none;margin-left:auto;position:relative}
.hdr__nav > ul{display:flex;align-items:stretch;gap:0}
.hdr__nav > ul > li{display:flex;align-items:stretch}
.hdr__nav > ul > li > a{
  display:flex;align-items:center;padding:0 .95rem;
  font-family:var(--schrift-text);font-weight:700;
  font-size:.755rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy);text-decoration:none;white-space:nowrap;
  border-bottom:3px solid transparent;margin-bottom:-1px;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.hdr__nav > ul > li > a:hover{color:var(--orange-voll);border-bottom-color:var(--orange)}
.hdr__nav > ul > li > a[aria-current]{color:var(--blau);border-bottom-color:var(--blau)}
.hdr__act{display:none;align-items:center;gap:.6rem;flex:none;margin-left:.75rem}
.burger{
  display:inline-flex;align-items:center;justify-content:center;margin-left:auto;
  width:48px;height:48px;border:1px solid var(--linie-kraeftig);background:#fff;
  border-radius:var(--kante);cursor:pointer;
}
.burger svg{width:22px;height:22px;color:var(--navy)}
@media (min-width:1200px){
  .hdr__nav{display:block}
  .hdr__act{display:flex}
  .burger{display:none}
}

/* Untermenue: ein Verzeichnis, keine schwebende Karte */
.has-sub{position:relative}
.sub-toggle{display:none}
.subnav{
  position:absolute;top:100%;left:0;z-index:95;min-width:290px;
  background:#fff;border:1px solid var(--linie);border-top:3px solid var(--orange);
  border-radius:var(--kante-karte);padding:.4rem;display:grid;gap:0;overflow:hidden;
  box-shadow:0 26px 50px -26px rgb(var(--schatten-ton)/.42);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s var(--ease),transform .14s var(--ease),visibility .14s;
}
.subnav::before{content:"";position:absolute;inset:-3px 0 auto 0;height:3px}
.has-sub:hover .subnav,.has-sub:focus-within .subnav,.subnav.is-open{
  opacity:1;visibility:visible;transform:none;
}
.subnav a{
  display:block;padding:.6rem .8rem;white-space:nowrap;
  font-size:.92rem;color:var(--navy);text-decoration:none;
  border-left:2px solid transparent;
}
.subnav a:hover{background:var(--flaeche-2);border-left-color:var(--orange);color:var(--blau-tief)}
.subnav a[aria-current="page"]{color:var(--blau);font-weight:700;border-left-color:var(--blau)}
.subnav--zwei{grid-template-columns:repeat(2,minmax(0,1fr));min-width:min(600px,88vw)}
.subnav--zwei > li:first-child{grid-column:1 / -1;border-bottom:1px solid var(--linie);margin-bottom:.3rem}

/* Handy-Navigation */
.mnav{
  position:fixed;inset:0;z-index:120;background:var(--flaeche);
  display:grid;grid-template-rows:auto 1fr auto;
  transform:translateY(-100%);transition:transform .28s var(--ease),visibility .28s;
  visibility:hidden;overflow-y:auto;
}
.mnav[data-open="true"]{transform:none;visibility:visible}
.mnav__top{display:flex;align-items:center;justify-content:space-between;padding:1rem var(--gut);border-bottom:1px solid var(--linie)}
.mnav__top .logo{height:28px;width:auto}
.mnav__body{padding:.5rem var(--gut) 1.5rem;display:grid}
.mnav__body > a{
  display:block;padding:1rem 0;border-bottom:1px solid var(--linie);
  font-family:var(--schrift-display);font-weight:600;font-size:1.2rem;
  color:var(--navy);text-decoration:none;letter-spacing:-.02em;
}
.mnav__sub{display:grid;padding:.5rem 0 .9rem;border-bottom:1px solid var(--linie)}
.mnav__sub a{padding:.55rem 0 .55rem 1rem;color:var(--gedaempft);text-decoration:none;font-size:.96rem;border-left:2px solid var(--linie)}
.mnav__sub a:hover{color:var(--blau-tief);border-left-color:var(--orange)}
.mnav__platt{margin-top:1.5rem;padding-top:1.25rem;border-top:3px solid var(--navy)}
.mnav__platt-titel{
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gedaempft);font-weight:700;margin-bottom:.5rem;
}
.mnav__platt a{display:block;padding:.5rem 0;color:var(--navy);text-decoration:none;font-weight:600}
.mnav__foot{display:flex;gap:.6rem;padding:1rem var(--gut) 1.5rem;border-top:1px solid var(--linie)}
.mnav__foot .btn{flex:1}

/* Feste Leiste am Handy */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;gap:.5rem;
  padding:.55rem var(--gut);background:var(--flaeche);border-top:1px solid var(--linie-kraeftig);
}
.dock .btn{flex:1;min-height:46px;padding-inline:.6rem;font-size:.88rem}
.dock .btn--main{flex:1.6}
.dock .btn--icon{flex:none;width:46px;padding:0}
.btn__kurz{display:inline}
.btn__lang{display:none}
@media (min-width:430px){.dock .btn__lang{display:inline}.dock .btn__kurz{display:none}}
@media (min-width:1200px){.dock{display:none}}
@media (max-width:1199px){body{padding-bottom:70px}}

/* Lesefortschritt: eine Linie, kein Verlauf */
.fortschritt{
  position:fixed;inset:0 0 auto 0;height:3px;z-index:100;background:var(--orange);
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  opacity:0;transition:opacity .2s var(--ease);
}
.fortschritt.is-on{opacity:1}

/* ============================================================================
   Abschnitte: das Register
   ============================================================================ */
/* 10.09.2026: von clamp(3rem,4.4vw,5rem) hochgesetzt. Auf 1440px waren das
   63px oben und unten, zu wenig fuer sechs Kapitel untereinander. */
.section{padding-block:clamp(3.5rem,6.2vw,7.5rem);background:var(--flaeche-2);position:relative}
/* Weiss ist hier die Ausnahme, nicht die Regel. Genau umgekehrt wie drueben. */
.section--mist{background:var(--flaeche)}
.section--navy{background:var(--navy);color:#fff}
.section--navy .h2,.section--navy .h3{color:#fff}
.section--navy .lead,.section--navy p{color:rgba(255,255,255,.78)}
.section--navy .eyebrow{color:var(--marke-hell)}
.section--navy a{color:#fff}

/* Jedes Kapitel bekommt eine Linie ueber sich und eine Nummer. */
.section + .section{border-top:1px solid var(--linie)}
main{counter-reset:kapitel}
.head{
  display:grid;gap:.85rem;margin-bottom:clamp(1.75rem,3vw,2.75rem);
  padding-top:1.5rem;border-top:3px solid var(--navy);position:relative;
  counter-increment:kapitel;
}
.head::after{
  content:counter(kapitel,decimal-leading-zero);
  position:absolute;top:1.35rem;right:0;
  font-family:var(--schrift-display);font-weight:700;font-size:.9rem;
  letter-spacing:.06em;color:var(--linie-kraeftig);font-variant-numeric:tabular-nums;
}
.section--navy .head{border-top-color:var(--orange)}
.section--navy .head::after{color:rgba(255,255,255,.35)}
.head--center{justify-items:center;text-align:center}
.head--center::after{display:none}
.head__act{display:flex;flex-wrap:wrap;gap:.7rem}
@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,.head--zwei > .h2,.head--zwei > .lead{grid-column:1}
  .head--zwei > .head__act{grid-column:2;grid-row:2 / span 2;justify-self:end;align-self:end}
  .head--zwei::after{right:0;top:1.35rem}
}

/* ============================================================================
   Held
   ============================================================================ */
.hero{
  background:var(--flaeche);border-bottom:1px solid var(--linie);
  position:relative;overflow:hidden;
}
/* Das sichtbare Raster. Ersetzt die Farbwolken und das Punktnetz von drueben. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--linie-zart) 1px,transparent 1px),
    linear-gradient(to bottom,var(--linie-zart) 1px,transparent 1px);
  background-size:var(--raster) var(--raster);
  mask-image:linear-gradient(to bottom,#000,transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 92%);
}
.hero__in{
  position:relative;display:grid;gap:clamp(2rem,4vw,3.25rem);
  padding-block:clamp(2.5rem,5vw,4.5rem);
}
.hero__copy{display:grid;gap:1.35rem;align-content:start;justify-items:start}
.hero__doors{display:flex;flex-wrap:wrap;gap:.75rem}
.hero__note{
  display:flex;align-items:flex-start;gap:.6rem;
  font-size:.9rem;color:var(--gedaempft);
}
.hero__note svg{width:18px;height:18px;color:var(--orange);flex:none;margin-top:.2rem}
.hero__lead{max-width:56ch}

/* Die Ueberschrift steht zeilenweise, mit einem Strich davor. */
.h1--zeilen{display:grid;gap:.02em;max-width:none}
.h1 .zeile{display:block}
.zeile--navy{color:var(--navy)}
.zeile--orange{color:var(--orange-voll)}
.zeile--blau{color:var(--blau)}

@media (min-width:1040px){
  .hero__in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start}
  .hero__copy{grid-column:1;grid-row:1 / span 2}
}

/* Kennzahlen im Held */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:100%;
  border-top:1px solid var(--linie);padding-top:1.35rem;
}
.stat__num{
  display:block;font-family:var(--schrift-display);font-weight:700;
  font-size:clamp(1.7rem,1.2rem + 1.6vw,2.5rem);line-height:1;
  letter-spacing:-.04em;color:var(--blau);font-variant-numeric:tabular-nums;
}
.stat__lbl{display:block;margin-top:.4rem;font-size:.82rem;line-height:1.3;color:var(--gedaempft)}

/* ---------------------------------------------------- Die Matrix im Held */
.matrix{
  background:var(--flaeche);border:1px solid var(--linie-kraeftig);
  border-top:4px solid var(--navy);border-radius:var(--kante-karte);overflow:hidden;
  display:grid;align-content:start;
}
.matrix__kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  padding:1rem 1.25rem;border-bottom:1px solid var(--linie);
}
.matrix__kopf b{
  font-family:var(--schrift-text);font-weight:700;font-size:.74rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--navy);
}
.matrix__kopf span{font-size:.78rem;color:var(--gedaempft)}
.matrix__liste{display:grid;counter-reset:zeile}
.matrix__liste li{
  display:flex;gap:.9rem;align-items:flex-start;padding:.95rem 1.25rem;
  border-bottom:1px solid var(--linie-zart);counter-increment:zeile;
  transition:background-color .18s var(--ease);
}
.matrix__liste li:hover{background:var(--flaeche-2)}
.matrix__liste svg{width:26px;height:26px;flex:none;color:var(--blau);margin-top:.15rem}
.matrix__liste b{
  display:block;font-family:var(--schrift-display);font-weight:600;
  font-size:.98rem;line-height:1.25;letter-spacing:-.015em;color:var(--navy);
}
.matrix__liste span{display:block;margin-top:.2rem;font-size:.85rem;line-height:1.5;color:var(--gedaempft)}
.matrix__fuss{display:grid;grid-template-columns:repeat(3,1fr);padding:1.1rem 1.25rem;gap:.5rem;background:var(--flaeche-2)}
.matrix__fuss div{display:grid;gap:.1rem}
.matrix__fuss b{
  font-family:var(--schrift-display);font-weight:700;font-size:1.85rem;line-height:1;
  letter-spacing:-.04em;color:var(--orange-voll);font-variant-numeric:tabular-nums;
}
.matrix__fuss span{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gedaempft);font-weight:700}
@media (min-width:1040px){.hero__in > .matrix{grid-column:2;grid-row:1}}

/* Vertrauenszeile */
.vertrauen{
  display:grid;gap:.75rem;width:100%;
  border-top:1px solid var(--linie);padding-top:1.1rem;
}
.vertrauen li{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;line-height:1.5;color:var(--gedaempft)}
.vertrauen svg{width:17px;height:17px;flex:none;margin-top:.2rem;color:var(--orange)}
.vertrauen a{font-weight:700}
@media (min-width:1040px){.hero__in > .vertrauen{grid-column:2;grid-row:2}}

/* ============================================================================
   Kopf einer Unterseite
   ============================================================================ */
.phero{
  background:var(--flaeche);border-bottom:1px solid var(--linie);
  position:relative;overflow:hidden;
}
.phero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--linie-zart) 1px,transparent 1px),
    linear-gradient(to bottom,var(--linie-zart) 1px,transparent 1px);
  background-size:var(--raster) var(--raster);
  mask-image:linear-gradient(to bottom,#000,transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 92%);
}
.phero__in{
  position:relative;display:grid;gap:1.1rem;justify-items:start;
  padding-block:clamp(2.25rem,4.2vw,3.75rem);
}
/* 22.10.2026, Emre: der Seitenkopf soll auf der Kante des Logos beginnen.
   Vorher war der ganze Block auf 64rem begrenzt und mittig, auf breiten
   Bildschirmen stand die Überschrift dadurch gut 120px rechts vom Logo.
   Jetzt volle Wrap-Breite wie Kopfzeile, die Zeilenlänge begrenzen die
   Kinder selbst. */
.phero__in:not(.phero__in--bild) > *{max-width:60rem}

/* ============================================================================
   Karten: Bloecke im Register, keine schwebenden Kacheln
   ============================================================================ */
.linkcards{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie)}
@media (min-width:640px){.linkcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.linkcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.linkcard{
  display:flex;flex-direction:column;gap:.6rem;position:relative;
  background:var(--flaeche);padding:clamp(1.25rem,2.2vw,1.6rem);
  text-decoration:none;color:inherit;
  transition:background-color .18s var(--ease);
}
.linkcard::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--orange);transform:scaleY(0);transform-origin:top;
  transition:transform .22s var(--ease);
}
.linkcard:hover{background:var(--flaeche-2)}
.linkcard:hover::before{transform:scaleY(1)}
.linkcard__ic{width:30px;height:30px;color:var(--blau);flex:none}
.linkcard b{
  font-family:var(--schrift-display);font-weight:600;font-size:1.14rem;
  line-height:1.24;letter-spacing:-.022em;color:var(--navy);
}
.linkcard span{font-size:.93rem;color:var(--gedaempft);line-height:1.55}
.linkcard .arrow{margin-top:auto;padding-top:.4rem}
.section--navy .linkcards{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.16)}
.section--navy .linkcard{background:var(--navy)}
.section--navy .linkcard:hover{background:rgba(255,255,255,.05)}
.section--navy .linkcard b{color:#fff}
.section--navy .linkcard span{color:rgba(255,255,255,.72)}
.section--navy .linkcard__ic{color:var(--marke-hell)}
.section--navy .arrow{color:var(--marke-hell)}

/* Die einfache Karte */
.grid{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie)}
@media (min-width:760px){.g-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.g-3{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--flaeche);padding:clamp(1.25rem,2.2vw,1.6rem);
  display:flex;flex-direction:column;gap:.7rem;
}
.card p{color:var(--gedaempft);font-size:.96rem}
a.card{text-decoration:none;color:inherit}

/* ============================================================================
   Fliesstext
   ============================================================================ */
.split{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (min-width:960px){
  .split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.prose{max-width:72ch;display:grid;gap:1.1rem;font-size:1.06rem;line-height:1.68}
.prose > h2{
  font-family:var(--schrift-display);font-weight:700;letter-spacing:-.028em;
  font-size:clamp(1.4rem,1.15rem + 1vw,1.85rem);line-height:1.16;color:var(--navy);
  margin-top:clamp(1.5rem,2.6vw,2.25rem);padding-top:1rem;
  border-top:1px solid var(--linie);
}
.prose > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose > .h2{color:var(--navy)}
.prose > h3,.prose > .h3{
  font-family:var(--schrift-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.1rem,1.02rem + .4vw,1.28rem);line-height:1.25;color:var(--navy);margin-top:.5rem;
}
.prose ul,.prose ol{display:grid;gap:.55rem;padding-left:0;list-style:none}
.prose ul > li{position:relative;padding-left:1.35rem}
.prose ul > li::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--orange);
}
.prose ol{counter-reset:pz}
.prose ol > li{position:relative;padding-left:2rem;counter-increment:pz}
.prose ol > li::before{
  content:counter(pz,decimal-leading-zero);position:absolute;left:0;top:.05em;
  font-family:var(--schrift-display);font-weight:700;font-size:.85rem;color:var(--orange-voll);
}
.prose ol.steps{counter-reset:none}
.prose ol.steps > li{padding-left:0}
.prose ol.steps > li::before{content:none}
.prose strong{color:var(--navy);font-weight:700}
.prose a{font-weight:500}

/* Hinweiskasten */
.note{
  display:flex;gap:.85rem;align-items:flex-start;
  background:var(--flaeche-3);border-left:3px solid var(--orange);
  padding:1rem 1.25rem;font-size:.96rem;line-height:1.55;color:var(--gedaempft);
}
.note svg{width:20px;height:20px;color:var(--orange-voll);flex:none;margin-top:.2rem}
.note a{color:var(--blau-tief);font-weight:700}
.section--navy .note{background:rgba(255,255,255,.07);color:rgba(255,255,255,.82)}

/* Schritte */
.steps{display:grid;gap:0;position:relative}
.step{
  display:flex;gap:1.1rem;align-items:flex-start;
  padding:1.15rem 0;border-top:1px solid var(--linie);
}
.step:last-child{border-bottom:1px solid var(--linie)}
.step__no{
  flex:none;width:40px;height:40px;display:grid;place-items:center;
  font-family:var(--schrift-display);font-weight:700;font-size:1rem;
  color:var(--orange-voll);background:var(--flaeche-2);
  border:1px solid var(--linie);border-radius:var(--kante);
  font-variant-numeric:tabular-nums;
}
.step__bd{display:grid;gap:.3rem;min-width:0}
.step__bd p{color:var(--gedaempft);font-size:.97rem}

/* Tabellen */
.tbl-wrap{overflow-x:auto;border:1px solid var(--linie);background:var(--flaeche);-webkit-overflow-scrolling:touch}
.tbl{width:100%;min-width:620px;font-size:.95rem}
.tbl th,.tbl td{padding:.85rem 1.1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--linie-zart)}
.tbl thead th{
  background:var(--navy);color:#fff;font-family:var(--schrift-text);
  font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
}
.tbl tbody th{font-weight:700;color:var(--navy)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl td{color:var(--gedaempft)}

/* Zahlenband */
.figs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie);
}
.figs div{display:grid;gap:.3rem;background:var(--flaeche);padding:1.2rem 1.15rem}
/* Drei Zahlen in zwei Spalten lassen ein leeres Viertel stehen, und weil das
   Band seine Trennlinien ueber gap:1px auf farbigem Grund zeichnet, stand dort
   ein graues Loch. Auf dem Handy unter jeder dieser Zahlenreihen. Schmal also
   untereinander. 10.09.2026 */
@media (max-width:640px){
  .figs{grid-template-columns:1fr}
}
.figs b{
  font-family:var(--schrift-display);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(1.8rem,1.35rem + 1.4vw,2.5rem);line-height:1;color:var(--blau);
  font-variant-numeric:tabular-nums;
}
/* Nur die Beschriftung, nicht jedes span im Zahlenband. Die Zifferrolle in
   curawel.js baut die Zahl in .rolle > .ziffer > span um, und das alte
   `.figs span` hat die fertig gerollte Zahl auf 13px zusammengeschrumpft.
   Deshalb standen die Zahlen kleiner da als ihre eigene Beschriftung, sobald
   die Rolle gelaufen war. Gefunden am 10.09.2026, Emre: „die zahlen auch
   groesser". */
.figs div > span{font-size:.86rem;color:var(--gedaempft);line-height:1.4}

/* Wo nur eine blanke Zahl steht, ist sie die Aussage und nicht die Beschriftung
   darunter. „1 Rahmenvertrag, 1 Zugang, 1 Rechnung" stand in 24px, kleiner als
   manche Zwischenueberschrift. Emre am 10.09.2026: „die zahlen auch groesser".
   Nur fuer Baender aus kurzen Zahlen, „2.100 h" oder „18 Monate" braechen
   in dieser Groesse um. */
.figs--gross div{gap:.3rem;padding:1.25rem 1.15rem}
/* 10.09.2026, zweiter Anlauf: 67px waren zu viel („die zahlen sind jetzt zuuu
   gross"). 46px stehen deutlich ueber der Beschriftung, ohne die Kachel zu
   sprengen, und bleiben in der Naehe der anderen Zahlenbaender mit 40px. */
.figs--gross b{font-size:clamp(2.2rem,1.6rem + 1.4vw,2.9rem);letter-spacing:-.045em}
.figs--gross div > span{font-size:.9rem;line-height:1.45}

/* Bilder */
.illu{position:relative;background:var(--flaeche-2);border:1px solid var(--linie);overflow:hidden}
.illu img{width:100%;height:auto;display:block}
.illu figcaption{
  padding:.8rem 1.1rem;font-size:.84rem;line-height:1.45;color:var(--gedaempft);
  border-top:1px solid var(--linie);background:var(--flaeche);
}
.prose > .illu{max-width:none;margin-block:.5rem}

/* Fragen */
.faq{display:grid;border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie);background:transparent}
.faq summary{
  display:flex;align-items:center;gap:1rem;padding:1.1rem 0;list-style:none;
  font-family:var(--schrift-display);font-weight:600;font-size:1.04rem;
  letter-spacing:-.015em;color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::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);
}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq summary:hover{color:var(--orange-voll)}
.faq__bd{padding:0 0 1.25rem;color:var(--gedaempft);font-size:.98rem;display:grid;gap:.7rem}
.faq__bd a{color:var(--blau-tief);font-weight:700}

/* Laufband */
.band{
  overflow:hidden;position:relative;border-block:1px solid var(--linie);
  padding-block:1rem;margin-block:clamp(1.75rem,3.5vw,2.75rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  --tempo:38s;
}
.band__spur{display:flex;width:max-content}
.band__satz{display:flex;gap:2.25rem;padding-right:2.25rem}
.band__satz b{
  font-family:var(--schrift-text);font-weight:700;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gedaempft);white-space:nowrap;
}
@media (prefers-reduced-motion:no-preference){
  .band__spur{animation:band var(--tempo) linear infinite}
  @keyframes band{to{transform:translateX(-50%)}}
  .band:hover .band__spur{animation-play-state:paused}
}

/* Hinweiszeile zu KI-Bildern */
.ki-zeile{
  margin-top:1.1rem;font-size:.8rem;color:var(--gedaempft);
  display:flex;align-items:center;gap:.5rem;
}
.ki-zeile::before{content:"";width:18px;height:2px;background:var(--orange);flex:none}

/* Abschlussband */
.cta-band{background:var(--navy);color:#fff;padding-block:clamp(3rem,5vw,4.5rem);position:relative;overflow:hidden}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:var(--raster) var(--raster);
}
.cta-band__in{position:relative;display:grid;gap:1.1rem;justify-items:center;text-align:center}
.cta-band .h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.78);max-width:60ch}

/* ============================================================================
   Formulare
   ============================================================================ */
.form{
  display:grid;gap:1.1rem;background:var(--flaeche);
  border:1px solid var(--linie-kraeftig);border-top:4px solid var(--navy);
  padding:clamp(1.35rem,2.6vw,2rem);
}
.field{display:grid;gap:.4rem}
.field label{font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.field .hint{font-size:.76rem;color:var(--gedaempft);font-weight:400;letter-spacing:0;text-transform:none}
.field input,.field select,.field textarea{
  /* 28.09.2026: ohne diese drei Angaben wird ein select so breit wie seine
     laengste option. "Einrichtung, ich brauche Personal" trieb das
     Kontaktformular auf 380px, auf einem 360px-Schirm liess sich die Seite
     dadurch seitlich schieben. Gemessen: 62px Ueberlauf bei 360px, 32px bei
     390px. min-width:0 erlaubt dem Rasterkind zu schrumpfen, border-box haelt
     das Innenmass im Rahmen, denn global ist border-box hier nicht gesetzt. */
  min-width:0;width:100%;box-sizing:border-box;
  font:inherit;font-size:1rem;color:var(--text);
  padding:.8rem .9rem;background:var(--flaeche-2);
  border:1px solid var(--linie-kraeftig);border-radius:var(--kante);
  transition:border-color .16s var(--ease),background-color .16s var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--marke-mittel)}
.field input:focus,.field select:focus,.field textarea:focus{
  background:#fff;border-color:var(--blau);outline:none;box-shadow:inset 0 0 0 1px var(--blau);
}
/* Die Zeile darueber ist spezifischer als der globale :focus-visible-Ring
   und hat ihn in den Formularen ausgeschaltet. Fuer die Tastatur kommt er
   hier zurueck, die Maus sieht weiter nur die blaue Kante. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px;
}
.field textarea{resize:vertical;min-height:130px;line-height:1.55}
.field-row{display:grid;gap:1.1rem}
@media (min-width:560px){.field-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--gedaempft);line-height:1.5}
.check input{margin-top:.25rem;width:20px;height:20px;flex:none;accent-color:var(--orange-voll)}
.form__foot{display:grid;gap:.7rem;justify-items:start;border-top:1px solid var(--linie);padding-top:1.1rem}

/* ============================================================================
   Fusszeile
   ============================================================================ */
.ftr{background:var(--navy);color:#fff;padding-block:clamp(2.75rem,4.5vw,4rem)}
.ftr__grid{display:grid;gap:2rem}
@media (min-width:640px){.ftr__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}}
.ftr__logo{height:28px;width:auto;margin-bottom:1rem;filter:brightness(0) invert(1)}
.ftr h3{
  font-family:var(--schrift-text);font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--marke-hell);margin:0 0 .9rem;font-weight:700;
}
.ftr ul{display:grid;gap:.3rem}
.ftr li a{display:inline-flex;align-items:center;min-height:28px;
  /* "Pflegepersonaluntergrenzen" ist breiter als eine Fussleisten-Spalte
     auf 375px. Ohne Umbruch ragte die Liste 22px ueber den Rand. */
  overflow-wrap:anywhere;hyphens:auto}
.ftr a{color:rgba(255,255,255,.82);text-decoration:none;font-size:.93rem}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr address{font-style:normal;color:rgba(255,255,255,.72);font-size:.93rem;line-height:1.65}
.ftr address a{color:#fff}
.ftr__soc{display:flex;gap:.6rem;margin-top:1.1rem}
.ftr__soc a{
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--kante);
}
.ftr__soc svg{width:18px;height:18px;color:#fff}
.ftr__soc a:hover{background:rgba(255,255,255,.1)}
.ftr__base{
  margin-top:clamp(2rem,3.5vw,3rem);padding-top:1.35rem;
  border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-wrap:wrap;gap:.85rem 1.5rem;align-items:center;justify-content:space-between;
}
.ftr__base p{color:rgba(255,255,255,.6);font-size:.85rem}
.ftr__base ul{display:flex;flex-wrap:wrap;gap:.65rem 1.35rem}
@media (max-width:640px){
  .ftr li a{min-height:44px}
  .ftr__grid{grid-template-columns:repeat(2,1fr);gap:1.75rem 1.25rem}
  .ftr__grid > :first-child{grid-column:1 / -1}
}

/* ============================================================================
   Einblenden beim Scrollen: zurueckhaltend, das Register bewegt sich nicht viel
   ============================================================================ */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .rise.is-in{opacity:1;transform:none}
  .rise{animation:de-notausgang .01s linear 4s forwards}
  .rise.is-in{animation:none}
  @keyframes de-notausgang{to{opacity:1;transform:none}}
  .illu img{opacity:0;transition:opacity .6s var(--ease)}
  .illu.is-in img{opacity:1}
  .illu img{animation:de-bild .01s linear 4s forwards}
  .illu.is-in img{animation:none}
  @keyframes de-bild{to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  .rise,.illu img{opacity:1;transform:none}
  .fortschritt{display:none}
}

/* Deutsche Komposita sind lang. Trennung nur als Notnagel, wo eine Stelle
   wichtig ist, steht ein weiches Trennzeichen im Text. */
.h1,.h2,.h3{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}

/* ---------------------------------------------------- Zahlen, die einrollen
   Das Skript baut aus jeder grossen Zahl ein Zaehlwerk: je Ziffer ein Band
   mit 0 bis 9, das an die richtige Stelle faehrt. Ohne diese vier Regeln
   steht das ganze Band da, und aus „18 Monate" wird „0123456789 Monate".
   Genau so sah es am 07.09.2026 auf der AUeG-Seite aus, weil die neue CSS
   die Regeln von drueben nicht mitgebracht hatte. */
.rolle{display:inline-flex;align-items:baseline;font-variant-numeric:tabular-nums}
.ziffer{display:inline-block;height:1em;overflow:hidden;line-height:1}
.ziffer__band{display:block;will-change:transform}
.ziffer__band span{display:block;height:1em;line-height:1;text-align:center}
@media (prefers-reduced-motion:no-preference){
  .ziffer__band{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
}

/* ---------------------------------------------- Rasterzellen duerfen schrumpfen
   Eine Zelle im Grid hat von Haus aus min-width:auto und wird deshalb so breit
   wie ihr breitestes unteilbares Kind. Am 375er Schirm hat die Fusszeile
   dadurch 366 statt 335 Pixel belegt und die ganze Seite liess sich seitlich
   schieben. Betrifft jedes Raster mit langen Wortketten oder Mailadressen. */
.ftr__grid > *,.linkcards > *,.grid > *,.split > *,.figs > *,.matrix__liste li{min-width:0}

/* Das Handymenue ist ein Raster in einem festen Kasten. Ohne min-width:0
   wird seine Zeile so breit wie der laengste Menuepunkt, und
   „Operationstechnische Assistenz" ist 436 Pixel lang: das Menue liess sich
   dann seitlich schieben. Lange Punkte duerfen stattdessen umbrechen. */
.mnav > *,.mnav__body > *,.mnav__sub > *{min-width:0}
.mnav__body > a,.mnav__sub a{white-space:normal;overflow-wrap:break-word}

/* ============================================================================
   Startseite, Fassung vom 10.09.2026
   Vorher stand alles Wesentliche in einer 528px schmalen Karte neben der
   Headline, in 11,8px Schrift, und die acht Leistungen standen als zwei
   Spalten Fliesstext nebeneinander. Gleicher Inhalt, mehr Raum.
   ============================================================================ */

/* ---------------------------------------------------- Held mit Bild */
.hero--bild .hero__in{position:relative;z-index:1}
/* Raster mit zwei Reihen: das Bild nimmt den Rest, die Zahlenleiste steht
   darunter. Mit height:100% am Bild allein rutschte die Leiste aus der
   Figur heraus und wurde von .illu{overflow:hidden} abgeschnitten. */
.heldbild{position:relative;margin:0;align-self:stretch;display:grid;grid-template-rows:minmax(0,1fr) auto}
.heldbild img{width:100%;height:100%;object-fit:cover;display:block}
/* Einspaltig traegt die Figur keine Hoehe, dort gibt das Verhaeltnis sie vor. */
@media (max-width:1039px){.heldbild img{height:auto;aspect-ratio:4/3}}
.heldbild__zahlen{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--navy);color:#fff;
}
.heldbild__zahlen div{display:grid;gap:.15rem;padding:1rem 1.1rem}
.heldbild__zahlen div + div{border-left:1px solid rgba(255,255,255,.18)}
.heldbild__zahlen b{
  font-family:var(--schrift-display);font-weight:700;font-size:1.85rem;line-height:1;
  letter-spacing:-.04em;color:var(--orange);font-variant-numeric:tabular-nums;
}
.heldbild__zahlen span{
  font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.72);
}

/* Die Vertrauenszeile laeuft jetzt unter beiden Spalten durch. */
.vertrauen--breit{border-top:1px solid var(--linie-kraeftig);padding-top:1.35rem}
@media (min-width:760px){
  .vertrauen--breit{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
}
@media (min-width:1040px){
  .hero--bild .hero__in{grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr)}
  .hero--bild .hero__copy{grid-column:1;grid-row:1}
  .hero--bild > .wrap > .heldbild{grid-column:2;grid-row:1}
  .hero--bild .vertrauen--breit{grid-column:1 / -1;grid-row:2}
}

/* ---------------------------------------------------- Einsatzorte */
.orte{
  background:var(--flaeche);border-bottom:1px solid var(--linie);
  padding-block:clamp(2.25rem,3.6vw,3.5rem);
}
.orte__lbl{
  font-family:var(--schrift-text);font-weight:700;font-size:.8rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gedaempft);
  margin-bottom:1.5rem;
}
.orte__liste{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie)}
.orte__liste li{
  background:var(--flaeche);padding:clamp(1.15rem,2vw,1.5rem);
  display:grid;gap:.5rem;align-content:start;
}
.orte__liste svg{width:26px;height:26px;color:var(--blau)}
.orte__liste b{
  font-family:var(--schrift-display);font-weight:600;font-size:1.05rem;
  line-height:1.25;letter-spacing:-.02em;color:var(--navy);
}
/* 0.9rem statt der 0.78rem aus der alten Karte. Der Text ist derselbe. */
.orte__liste span{font-size:.9rem;line-height:1.55;color:var(--gedaempft)}
@media (min-width:640px){.orte__liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.orte__liste{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------------------------------------------------- Karte mit Bildstreifen */
.card--bild{padding:0;gap:0}
.card__bild{margin:0;overflow:hidden;background:var(--flaeche-2)}
.card__bild img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:8/5}
.card__text{
  padding:clamp(1.25rem,2.2vw,1.75rem);
  display:flex;flex-direction:column;gap:.7rem;flex:1;
}
.card--bild .btns{margin-top:auto;padding-top:.35rem}

/* ---------------------------------------------------- Drei Lagen nebeneinander */
.lagen{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie)}
.lage{background:var(--flaeche);padding:clamp(1.35rem,2.4vw,1.9rem);display:grid;gap:1rem;align-content:start}
.lage__nr{
  font-family:var(--schrift-text);font-weight:700;font-size:.8rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--orange-voll);
}
.lage .h3{margin:0}
.lage__liste{display:grid;gap:1rem}
.lage__liste li{display:grid;gap:.2rem}
.lage__liste a{
  font-family:var(--schrift-display);font-weight:600;font-size:1.02rem;
  letter-spacing:-.015em;color:var(--navy);text-decoration:none;
  border-bottom:2px solid var(--linie-kraeftig);justify-self:start;
  /* Eigenstaendiger Listenlink, kein Wort im Satz: braucht die 44px. */
  display:inline-flex;align-items:center;min-height:44px;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.lage__liste a:hover{color:var(--blau);border-bottom-color:var(--blau)}
.lage__liste span{font-size:.92rem;line-height:1.55;color:var(--gedaempft)}
@media (min-width:900px){.lagen{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------------------------------------------------- Text neben Bild */
.gegen{display:grid;gap:clamp(1.75rem,3.5vw,3rem);align-items:start}
.gegen__text{display:grid;gap:1.1rem;max-width:60ch}
.gegen__text .h2{margin:0}
.gegen__text p{color:var(--gedaempft)}
.gegen__text .figs{margin-block:.4rem}
.gegen__bild{margin:0}
.gegen__bild img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}
@media (min-width:960px){
  .gegen{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2.5rem,5vw,4.5rem)}
  .gegen__bild{position:sticky;top:calc(var(--kopfhoehe,72px) + 2rem)}
}

/* ---------------------------------------------------- Drei statt sechs Karten */
@media (min-width:640px){.linkcards--drei{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.linkcards--drei{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Die Mailadresse in der Fusszeile war 18px hoch, zu klein zum Treffen. */
.ftr a[href^="mailto"]{display:inline-flex;align-items:center;min-height:44px}


/* ============================================================================
   Rundungen, 10.09.2026
   Die deutsche Seite war als einzige der Gruppe durchgehend hart abgesetzt.
   Werte gemessen an den Live-Fassungen von Curawel AT und der Pflegegruppe,
   nicht geschaetzt: Knoepfe 999px, Kleinteile 14px, Karten 20px, Bilder 28px.

   Die Kachelraster (.grid, .linkcards, .orte__liste, .lagen, .figs) zeichnen
   ihre Trennlinien ueber gap:1px auf einem farbigen Grund. Ohne
   overflow:hidden stehen die Zellen in den runden Ecken vor.
   ============================================================================ */

/* --- Karten und Kachelraster, 20px --- */
.grid,.linkcards,.orte__liste,.lagen,.figs,.tbl-wrap,.card,.lage,.linkcard,
.matrix__liste li:first-child,.note,.faq,.split .prose > .illu{
  border-radius:var(--kante-karte);
}
.grid,.linkcards,.orte__liste,.lagen,.figs,.tbl-wrap,.faq{overflow:hidden}
/* In einem geklammerten Raster darf die Zelle selbst keine Ecke mehr haben,
   sonst sitzt eine Rundung in der Rundung. */
.grid > *,.linkcards > *,.orte__liste > li,.lagen > .lage,.figs > div{border-radius:0}

/* --- Bilder und grosse Bloecke, 28px --- */
.illu,.heldbild,.gegen__bild{
  border-radius:var(--kante-flaeche);overflow:hidden;
}
.card__bild{overflow:hidden}
/* Die Zahlenleiste sitzt unten in der Heldfigur und braucht nur unten Ecken. */
.heldbild{border-radius:var(--kante-flaeche)}
/* Das Kartenbild bekommt selbst keine Ecke. Das Raster darueber ist schon
   gerundet und geklammert, eine zweite Rundung saesse mitten im Raster. */
.card--bild .card__bild{border-radius:0}

/* --- Kleinteile, 14px --- */
.field input,.field select,.field textarea,.burger,.tbl-wrap table,
.mnav__sub,.step__nr{border-radius:var(--kante)}
/* Die sozialen Symbole in der Fusszeile sind bei AT und PG Kreise. */
.ftr__soc a{border-radius:var(--r-voll)}

/* --- Der Kopf der Seite bleibt eine durchgehende Leiste, die wird nicht
       gerundet. Ein abgerundeter Balken am oberen Bildrand sieht aus, als
       waere er verrutscht. --- */

/* ============================================================================
   Der Mitleser, 10.09.2026
   59 von 63 Seiten waren eine 770px schmale Textspalte in einem 1200px
   breiten Rahmen. Rechts blieben gut 400px leer, auf jeder Seite gleich.
   Den Text breiter zu machen war keine Loesung, dann wird die Zeile zu lang.
   Jetzt steht dort das Inhaltsverzeichnis der Seite, erzeugt aus ihren eigenen
   Ueberschriften (build.py, mitleser()). Ab drei Kapiteln.
   ============================================================================ */
.mitleser{margin:0}
.mitleser__box{
  border:1px solid var(--linie);border-radius:var(--kante-karte);
  background:var(--flaeche);padding:1.15rem 1.25rem;
}
.section--mist .mitleser__box{background:var(--flaeche-2)}
.mitleser__lbl{
  font-family:var(--schrift-text);font-weight:700;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gedaempft);
  margin:0 0 .85rem;
}
.mitleser__liste{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;counter-reset:kap}
.mitleser__liste li{counter-increment:kap}
.mitleser__liste a{
  display:flex;gap:.7rem;align-items:baseline;
  padding:.55rem .7rem;min-height:44px;box-sizing:border-box;
  border-radius:var(--kante);
  font-size:.94rem;line-height:1.4;color:var(--gedaempft);text-decoration:none;
  transition:background-color .18s var(--ease),color .18s var(--ease);
}
.mitleser__liste a::before{
  content:counter(kap,decimal-leading-zero);
  font-family:var(--schrift-display);font-weight:700;font-size:.76rem;
  color:var(--linie-kraeftig);font-variant-numeric:tabular-nums;flex:none;
  transition:color .18s var(--ease);
}
.mitleser__liste a:hover{background:var(--flaeche-2);color:var(--navy)}
.section--mist .mitleser__liste a:hover{background:var(--flaeche)}
/* Das Kapitel, in dem der Leser gerade steht. Setzt curawel.js. */
.mitleser__liste a[aria-current="true"]{color:var(--navy);font-weight:700}
.mitleser__liste a[aria-current="true"]::before{color:var(--orange-voll)}

/* Die Sprungmarke darf nicht unter der klebenden Kopfzeile landen. */
.prose > h2[id]{scroll-margin-top:calc(var(--kopfhoehe) + 1.5rem)}

@media (min-width:1040px){
  .split--mitleser{grid-template-columns:minmax(0,1fr) 17rem;column-gap:clamp(2.5rem,4vw,4rem)}
  .mitleser{position:sticky;top:calc(var(--kopfhoehe) + 1.5rem)}
}
@media (max-width:1039px){
  /* Einspaltig steht das Verzeichnis vor dem Text, hinter ihm waere es sinnlos. */
  .split--mitleser{display:flex;flex-direction:column}
  .split--mitleser .mitleser{order:-1}
  .mitleser__box{padding:1rem 1.1rem}
}

/* Nachtrag zu den Rundungen: die Flaechen, die beim ersten Durchgang noch
   hart standen. Volle Baender (Kopfzeile, Oberleiste, Abschnitte, CTA-Band,
   Fusszeile) bleiben eckig, die laufen von Rand zu Rand. */
.form{border-radius:var(--kante-karte)}
.note{border-radius:var(--kante-karte);border-left-width:4px}
.mnav__platt,.skip{border-radius:var(--kante)}

/* ============================================================================
   Bedarfsrechner im Held, 10.09.2026
   Ersetzt das Foto. Ein Bedienfeld, kein Text: die Besucherin klickt Beruf und
   Zeitraum an und bekommt sofort den Namen der Leistung, die sie braucht.
   Deshalb duerfen die Schalter dicht stehen, das liest niemand am Stueck.
   ============================================================================ */
.rechner{
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--kante-flaeche);overflow:hidden;
  box-shadow:0 34px 60px -34px rgb(var(--schatten-ton)/.34);
  display:grid;align-content:start;
}

/* --- Umschalter Haus / Fachkraft --- */
.rechner__tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:.3rem;
  padding:.3rem;background:var(--flaeche-2);border-bottom:1px solid var(--linie);
}
.rechner__tabs button{
  min-height:42px;padding:.5rem .9rem;border:0;background:transparent;cursor:pointer;
  border-radius:var(--r-voll);
  font-family:var(--schrift-text);font-weight:700;font-size:.92rem;
  color:var(--gedaempft);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.rechner__tabs button:hover{color:var(--navy)}
.rechner__tabs button[aria-selected="true"]{
  background:var(--navy);color:#fff;
  box-shadow:0 8px 18px -10px rgb(var(--schatten-ton)/.55);
}

/* --- Die Fragen --- */
.rechner__feld{display:grid;gap:1.15rem;padding:1.15rem 1.25rem 1.3rem}
.rechner__frage{border:0;margin:0;padding:0;display:grid;gap:.55rem;min-width:0}
.rechner__frage legend{
  padding:0;font-family:var(--schrift-text);font-weight:700;font-size:.76rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gedaempft);
}
.rechner__wahl{display:flex;flex-wrap:wrap;gap:.4rem}
.rechner__wahl button{
  min-height:34px;padding:.32rem .8rem;cursor:pointer;
  border:1px solid var(--linie);background:transparent;
  border-radius:var(--r-voll);
  font-family:var(--schrift-text);font-weight:600;font-size:.85rem;
  color:var(--navy);white-space:nowrap;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),transform .12s var(--ease);
}
.rechner__wahl button:hover{border-color:var(--blau);background:var(--flaeche-2)}
.rechner__wahl button:active{transform:scale(.97)}
.rechner__wahl button[aria-pressed="true"]{
  background:var(--navy);border-color:var(--navy);color:#fff;
}
/* Die Schalter stehen dicht. Auf dem Tastfeld muss trotzdem 44px hoch
   getroffen werden, das holt die unsichtbare Erweiterung. */
@media (pointer:coarse){
  .rechner__wahl button{min-height:44px;padding-block:.6rem}
}

/* --- Die Antwort --- */
.rechner__antwort{
  display:grid;gap:.4rem;padding:1.25rem;
  background:var(--flaeche-2);border-top:1px solid var(--linie);
}
.rechner__satz{font-size:.88rem;line-height:1.45;color:var(--gedaempft);margin:0}
.rechner__satz b{color:var(--navy);font-weight:700}
.rechner__name{
  margin:0;font-family:var(--schrift-display);font-weight:700;
  font-size:clamp(1.35rem,1.05rem + .95vw,1.7rem);line-height:1.12;
  letter-spacing:-.03em;color:var(--orange-voll);
}
.rechner__text{margin:.1rem 0 0;font-size:.92rem;line-height:1.5;color:var(--navy)}
.rechner__notiz{
  margin:.15rem 0 0;font-size:.84rem;line-height:1.45;color:var(--gedaempft);
}
.rechner__tat{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}

/* Die Antwort kommt herein, damit der Klick eine Wirkung hat. */
@media (prefers-reduced-motion:no-preference){
  .rechner__antwort.ist-neu > *{animation:rechner-auf .32s var(--ease) both}
  .rechner__antwort.ist-neu > :nth-child(2){animation-delay:.03s}
  .rechner__antwort.ist-neu > :nth-child(3){animation-delay:.06s}
  .rechner__antwort.ist-neu > :nth-child(4){animation-delay:.09s}
  .rechner__antwort.ist-neu > :nth-child(5){animation-delay:.12s}
  .rechner__antwort.ist-neu > :nth-child(6){animation-delay:.15s}
  @keyframes rechner-auf{
    from{opacity:0;transform:translateY(6px)}
    to{opacity:1;transform:none}
  }
}

/* --- Der Held mit dem Rechner ---
   Emre am 10.09.2026: „man muss scrollen um alles zu sehen, es sollte alles
   gleich beim Draufgehen zu sehen sein." Gemessen bei 1440 x 800 war der Held
   1078px hoch, sichtbar waren 681px. Drei Gruende, in der Reihenfolge ihres
   Gewichts: die Ueberschrift stand in 70px und nahm allein 360px, der Rechner
   war 795px hoch, und die Vertrauenszeile lag als eigene Reihe unter beiden
   Spalten, obwohl links noch Platz war.
   Also: kleinere Ueberschrift im geteilten Held (sie steht hier neben einem
   Bedienfeld, sie ist kein Plakat), knapperer Innenabstand, und die
   Vertrauenszeile wandert in die linke Spalte neben den Rechner. --- */
@media (min-width:1040px){
  .hero--rechner .hero__in{
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    gap:clamp(1.8rem,2.8vw,2.8rem);
    padding-block:1.85rem 1.45rem;
  }
  .hero--rechner .hero__copy{grid-column:1;grid-row:1;gap:1.05rem}
  .hero--rechner .h1{font-size:clamp(2.1rem,.9rem + 2.3vw,3.05rem);letter-spacing:-.032em}
  /* Die Auszeichnungszeile lief in der schmaleren Spalte auf zwei Zeilen. */
  .hero--rechner .eyebrow{font-size:.76rem;letter-spacing:.12em}
  .hero--rechner .hero__lead{font-size:1.03rem;line-height:1.55;max-width:48ch}
  .hero--rechner .hero__note{font-size:.86rem}
  .hero--rechner > .wrap > .rechner{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:calc(var(--kopfhoehe) + 1.25rem)}
  /* Einspaltig unter dem Text, nicht ueber die ganze Breite: so waechst der
     Held nicht um ihre Hoehe, sondern fuellt den Platz, der links frei ist. */
  .hero--rechner .vertrauen--breit{
    grid-column:1;grid-row:2;align-self:end;
    grid-template-columns:1fr;gap:.6rem;padding-top:1rem;
  }
  .hero--rechner .vertrauen--breit li{font-size:.85rem;line-height:1.45}
}

/* Wer anstellt, wer anweist, wer zahlt. Die Unterscheidung, an der sich
   Ueberlassung und Vermittlung wirklich trennen, und die erste Frage jedes
   Einkaeufers. Die Seite formuliert sie selbst so unter
   /fuer-einrichtungen/rechtlicher-rahmen/. */
.rechner__rollen{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;
  margin:.85rem 0 0;padding-top:.85rem;border-top:1px solid var(--linie);
}
.rechner__rollen > div{display:grid;gap:.1rem;align-content:start}
.rechner__rollen dt{
  font-family:var(--schrift-text);font-weight:600;font-size:.71rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gedaempft);
}
.rechner__rollen dd{
  margin:0;font-family:var(--schrift-display);font-weight:600;font-size:.86rem;
  line-height:1.28;letter-spacing:-.015em;color:var(--navy);
}

/* ============================================================================
   Kacheln atmen, 10.09.2026
   Die Raster zeichneten ihre Trennlinien ueber gap:1px auf farbigem Grund.
   Das klebte alles zu einer Platte zusammen, und wo eine Reihe nicht aufging,
   blieb die Grundfarbe als graues Leerfeld stehen: auf /wissen/ zweimal in
   der ersten Gruppe. Jetzt steht jede Kachel fuer sich, mit Abstand und
   eigener runder Kante. Leerfelder gibt es damit nicht mehr.
   ============================================================================ */
.linkcards,.grid,.orte__liste,.lagen{
  background:transparent;border:0;gap:clamp(.7rem,1.2vw,1rem);overflow:visible;
}
.linkcard,.card,.orte__liste > li,.lagen > .lage{
  border:1px solid var(--linie);border-radius:var(--kante-karte);
  background:var(--flaeche);
}
.section--mist :is(.linkcard,.card,.orte__liste > li,.lagen > .lage){background:var(--flaeche-2)}
/* Die orange Kante beim Ueberfahren sass in der Ecke. Jetzt folgt sie ihr. */
.linkcard::before{border-radius:var(--kante-karte) 0 0 var(--kante-karte)}
.linkcard:hover{background:var(--flaeche-2);border-color:var(--linie-kraeftig)}
.section--mist .linkcard:hover{background:var(--flaeche)}
.section--navy .linkcards{background:transparent;border:0}
.section--navy .linkcard{border-color:rgba(255,255,255,.22)}

/* Seit die Kacheln einzeln stehen, muss die Karte ihr Bild wieder beschneiden,
   sonst steht das Foto ueber der runden Ecke. Vorher erledigte das der
   geklammerte Rahmen des Rasters. */
.card--bild{overflow:hidden}

/* ============================================================================
   Bewegung beim Scrollen, 10.09.2026
   Emre: „bau ein paar Effekte ein bitte beim Scrollen".

   Das Skript rechnete schon seit dem 06.09. mehr aus, als diese Seite benutzt
   hat: eine Parallaxe je Bild, einen Fortschritt durch jede Schrittleiste und
   eine Reihenfolge fuer Kacheln. Die deutschen Stile sind am 07.09. neu
   geschrieben worden und haben davon nur das Einblenden uebernommen. Hier
   werden die vorhandenen Signale endlich angeschlossen, statt neue zu bauen.

   Der Schalter heisst `.bewegung`. Das Skript setzt ihn auf <html>, und zwar
   erst, wenn die Scroll-Schleife wirklich haengt und niemand Bewegung
   abgeschaltet hat. Alles hier steht dahinter. Ohne JavaScript gibt es die
   Klasse nicht, dann sieht die Seite aus wie vorher: sichtbar, nur ohne
   Effekte. Das ist die Reissleine, ohne eine zweite bauen zu muessen.
   ============================================================================ */

/* --- 1. Die Schrittleiste laeuft mit ---------------------------------------
   Acht Seiten erklaeren einen Ablauf in nummerierten Schritten. Beim Scrollen
   waechst eine orange Schiene an den Nummern entlang, und jede Nummer schaltet
   sich ein, sobald man bei ihr angekommen ist. Der Ablauf laeuft also ab,
   waehrend man ihn liest. `--fortschritt` und `.erreicht` kommen aus dem
   Skript. */
.bewegung .steps::before,
.bewegung .steps::after{
  content:"";position:absolute;left:19px;width:2px;pointer-events:none;
  top:calc(1.15rem + 20px);bottom:calc(1.15rem + 20px);
}
.bewegung .steps::before{background:var(--linie)}
.bewegung .steps::after{
  background:var(--orange-voll);transform-origin:top;
  transform:scaleY(var(--fortschritt,0));
}
.bewegung .step__no{
  position:relative;z-index:1;
  color:var(--gedaempft);background:var(--flaeche);border-color:var(--linie);
  transition:color .3s var(--ease),background-color .3s var(--ease),
             border-color .3s var(--ease);
}
.bewegung .step.erreicht .step__no{
  color:#fff;background:var(--orange-voll);border-color:var(--orange-voll);
}
/* Auch am Handy: die Nummer bleibt links neben dem Text, ihre Mitte liegt bei
   20px, gemessen bei 375px Breite. Die Schiene trifft also. */

/* --- 2. Kacheln kommen nacheinander ----------------------------------------
   Ein Raster, das als ganze Platte auftaucht, liest sich wie ein Bild. Kommen
   die Kacheln nacheinander, liest man sie auch nacheinander. `--i` setzt das
   Skript, 70ms Abstand, nach der achten ist Schluss. Eine Animation statt
   einer Ueberblendung, damit die eigenen Uebergaenge der Kacheln beim
   Darueberfahren unangetastet bleiben. */
.bewegung .linkcards.rise:not(.is-in) > *,
.bewegung .grid.rise:not(.is-in) > *,
.bewegung .figs.rise:not(.is-in) > *{opacity:0}
.bewegung .linkcards.rise.is-in > *,
.bewegung .grid.rise.is-in > *,
.bewegung .figs.rise.is-in > *{
  animation:de-staffel .5s var(--ease) both;
  animation-delay:calc(var(--i,0) * 70ms);
}
@keyframes de-staffel{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

/* --- 3. Bilder ziehen langsamer mit ----------------------------------------
   Das Bild wandert innerhalb seines Rahmens etwas langsamer als die Seite.
   Der Rahmen schneidet ab, deshalb ist das Bild um 9 Prozent groesser
   gezeichnet: sonst stuende beim staerksten Ausschlag ein Streifen frei. */
.bewegung figure.illu img{
  transform:translate3d(0,calc(var(--par,0) * 1px),0) scale(1.09);
  will-change:transform;
}

/* --- 4. Das Raster im Held zieht nach ---------------------------------------
   Hinter jeder Ueberschrift liegt ein feines Linienraster. Es wandert beim
   Scrollen etwas langsamer nach unten als der Text davor. Das ist der Grund,
   warum der Kopf jeder Seite Tiefe bekommt, ohne dass dort ein Bild liegen
   muss. `--tiefe` zaehlt im Skript von 0 auf 1 ueber die erste Bildhoehe.

   Nur die Zeichnung bewegt sich, nicht der Kasten: das ::before liegt in einem
   Abschnitt mit overflow:hidden und ist oben wie unten ueberdeckt. */
.bewegung .hero::before,
.bewegung .phero::before{
  transform:translate3d(0,calc(var(--tiefe,0) * 46px),0);
  will-change:transform;
}

/* Der Text im Held haelt dagegen und geht ein Stueck frueher weg. Sehr wenig:
   er soll beim Weiterscrollen zurueckweichen, nicht verschwinden. */
.bewegung .hero__copy{
  transform:translate3d(0,calc(var(--tiefe,0) * -14px),0);
}

/* Die Kacheln des Rasters staffeln sich nur, wenn sie einzeln stehen. Wo sie
   als Platte auf farbigem Grund liegen, faellt der Grund sonst leer auf. */
.bewegung .linkcards.rise,
.bewegung .grid.rise{opacity:1;transform:none}

/* ============================================================================
   Umbau nach dem Feedback vom 22.09.2026
   Nur deutsche Regeln. Nichts davon gehoert nach Oesterreich.
   ========================================================================= */

/* Zwischenueberschriften im Untermenue. „Wie funktioniert's" fasst die frueher
   getrennten Reiter Einrichtungen und Fachkraefte zusammen, und ohne diese
   beiden Zeilen stuende dort zweimal „So laeuft es ab" ohne Bezug. */
.subnav__titel{
  padding:.55rem .9rem .25rem;font-size:.72rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--marke);
  pointer-events:none;
}
.subnav__titel + li a{padding-top:.25rem}
/* Das Handymenue steht auf Weiss, nicht wie das Klappfeld auf Navy.
   --marke-hell waere dort kaum zu lesen. */
.mnav__sub-titel{
  margin:1rem 0 .15rem;font-size:.72rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--marke);
}

/* Die Fusszeile hat statt sechs nur noch vier Spalten: „zu viele Reiter"
   stand im Feedback zweimal, einmal fuer das Menue und einmal hier unten.
   Berufe und Wissen sind ganz raus, die Seiten bleiben ueber Flliesstext
   und Sitemap erreichbar. */
@media (min-width:1100px){
  .ftr__grid--vier{grid-template-columns:1.5fr 1fr 1fr 1fr}
}

/* „Hier fehlt die Farbe im Logo." Die gemeinsame Regel .ftr__logo dreht das
   Logo mit brightness(0) invert(1) auf reines Weiss, weil Oesterreichs
   Fusszeile hell ist und Deutschlands navy. Hier steht deshalb das Signet in
   Orange und Weiss, nur der Schriftzug ist weiss: #1e70bb kommt auf dem Navy
   #052b59 auf etwa 2,5:1 und waere nicht zu lesen. Die Umfarbung steckt im
   Sprite als eigenes Symbol #logo-negativ. */
/* 06.10.2026, Feedback: „Logo sieht noch komisch aus." Die beiden Innenflaechen
   des Kreuzes waren weiss, auf Navy wurde daraus ein gefuellter Block. Im
   Original ist das Kreuz ein Umriss, die Flaechen decken nur die Ueberlappung ab.
   Sie stehen im Sprite jetzt auf currentColor und nehmen hier das Navy an. */
.ftr__logo--farbe{filter:none;color:var(--navy)}

/* Member of CWG. Die weisse Fassung des Signets ist genau fuer dunkle
   Fusszeilen gemacht, die Buchstaben sind aus der Pille ausgestanzt.
   Mindesthoehe laut Logohandbuch 20px. */
.ftr__cwg{display:block;height:24px;width:auto;margin:0 0 1.25rem}

/* „Ganz unten steht seit 2026, das trifft nicht zu." Gemeint war das
   Copyright-Jahr, gelesen wurde es als Gruendungsjahr. Jetzt steht das
   Gruendungsjahr in der Zeile und das Copyright darunter, kleiner. */
.ftr__jahr{opacity:.65}

/* Die drei Einstiege in der Kopfleiste
   „1, 2, 3, 4 Button. Fünf eigentlich sogar." Nicole hat im Gespräch
   vorgeschlagen, statt der vielen roten „Personal anfragen" die drei
   Einstiege hervorzuheben: als Fachkraft bewerben, Personal anfragen,
   in exaPool anmelden. Die lagen bisher als blasse Textlinks in der
   Leiste und der rote Knopf stand direkt darunter noch einmal.

   Jetzt sind es drei gleichwertige Pillen, und der Knopf in der Kopfzeile
   ist weg: darüber steht er schon, und unten schwebt die Leiste mit. */
.topbar{font-size:.86rem;padding:.2rem 0}
.topbar__in > a{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.34rem .8rem;border-radius:999px;font-weight:600;
  border:1px solid rgba(255,255,255,.28);
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.topbar__in > a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:#fff}
.topbar__in > a ~ a{margin-left:.45rem}
/* exaPool ist der Einstieg, den sie am meisten nach vorn haben möchten. */
.topbar a.topbar__app{background:var(--akzent);border-color:var(--akzent);font-weight:700}
.topbar a.topbar__app:hover{background:var(--akzent-voll);border-color:var(--akzent-voll)}

/* Ohne den Knopf rechts darf die Navigation den Platz nehmen. */
.hdr__nav{margin-left:auto}

/* ---------------------------------------------------------- Das Sternbild
   Nicole im Gespräch am 22.09.2026 über den Hintergrund der CWG-Seite:
   „das mit diesen Sternbildern, die sich verbinden, finde ich super geil"
   und „gerade wenn du über die CWG kommst und dann eine von den Gruppen
   anklickst, dass man sieht, es ist dieselbe Grundstruktur".

   Übernommen aus ParticleNetwork.astro der CWG-Seite, mit drei Unterschieden:
   die Farben kommen aus der Marke statt fest aus dem Code, die Schleife hält
   an sobald der Reiter in den Hintergrund geht, und unter 768px läuft sie gar
   nicht erst an. Dort gibt es keinen Mauszeiger, und das Rechnen kostet nur
   Akku.

   Liegt über dem Raster und unter dem Text, klicks gehen durch. */
.netz{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
}
.hero__in,.phero__in{position:relative;z-index:1}
/* Auf dem Telefon bleibt das Sternbild sichtbar, aber als Standbild: einmal
   gezeichnet, keine Schleife, kein Mauszeiger. Die Wiedererkennbarkeit war
   der Grund fuer den Effekt, und die hoert nicht bei 767px auf. Was dort
   nichts zu suchen hat, ist die Rechenschleife. */
@media (max-width:767px){.netz{opacity:.6}}

/* Das Klappfeld des letzten Menüpunkts
   Seit der Knopf aus der Kopfzeile raus ist, sitzt die Navigation ganz rechts
   und das linksbündige Klappfeld von „Über uns" ragt über den Rand. Gemessen
   bei 1280px: 45px seitlicher Überlauf, die ganze Seite ließ sich schieben.
   Es ist zwar unsichtbar, aber visibility:hidden nimmt weiter Platz.

   Die letzten beiden Punkte mit Untermenü klappen deshalb nach links auf. */
.hdr__nav > ul > li.has-sub:nth-last-child(-n+3) .subnav{left:auto;right:0}

/* ============================================================================
   Der Dienstplan im Helden, 30.09.2026
   Emre: "ich denke ihnen gefällt der Header nicht, weil rechts davon auch
   sehr viele Knöpfe gibt zum Anklicken" und "lass dir was Neues einfallen,
   was die Aufmerksamkeit zieht". Der Bedarfsrechner hatte 13 anklickbare
   Elemente. Er steht jetzt auf /wie-funktionierts/.

   Hier steht stattdessen ein Wochendienstplan eines Wohnbereichs. Vier
   Dienste sind offen, sie werden nacheinander in exaPool eingetragen und
   besetzt. Das Bild kennt jede Pflegedienstleitung aus ihrem Alltag, und es
   zeigt Nicoles Satz aus dem Gespräch statt ihn zu beschreiben.

   Bewusst ohne Uhrzeiten: "gemeldet 10:42, besetzt 12:07" wie auf der
   österreichischen Karte wäre ein Tempoversprechen, und /ueber-uns/ sagt
   ausdrücklich, dass wir keine Fristen versprechen.
   ========================================================================= */
.plan{
  position:relative;z-index:1;margin:0;
  background:#fff;border:1px solid var(--linie);border-radius:var(--kante-karte);
  box-shadow:0 30px 60px -30px rgb(var(--schatten-ton)/.45);
  padding:clamp(1rem,2.2vw,1.5rem);
  display:grid;gap:.9rem;width:100%;max-width:540px;justify-self:center;align-self:start;
}
.plan__kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.plan__titel{display:grid;gap:.1rem;min-width:0}
.plan__titel b{font-size:.98rem;line-height:1.25;color:var(--navy)}
.plan__titel span{font-size:.78rem;color:var(--gedaempft)}
.plan__zaehler{
  flex:none;display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .7rem;border-radius:999px;font-size:.74rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums;
  background:#fff1ea;color:var(--akzent-voll);border:1px solid #f6cdb8;
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.plan__zaehler::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.plan.is-voll .plan__zaehler{background:#e6f4ea;color:#14663a;border-color:#bfe3cd}

.plan__raster{
  display:grid;grid-template-columns:2.6rem repeat(7,minmax(0,1fr));gap:4px;
  font-variant-numeric:tabular-nums;
}
.plan__tag,.plan__schicht{
  font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gedaempft);display:flex;align-items:center;justify-content:center;
}
.plan__schicht{justify-content:flex-start}
.plan__tag{padding-bottom:.15rem}
.z{
  position:relative;height:2.15rem;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:600;letter-spacing:.02em;
  background:var(--flaeche);color:var(--gedaempft);border:1px solid var(--linie-zart);
  transition:background-color .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease);
}
/* Die Lücke: gestrichelt, in der Akzentfarbe, damit sie sofort auffällt. */
.z--offen{
  background:#fff6f1;color:var(--akzent-voll);border:1.5px dashed var(--akzent);
  font-weight:700;
}
/* Gerade dran: pulsiert kurz, der Blick soll dorthin. */
.z--offen.is-dran{animation:plan-puls .9s var(--ease) 1}
@keyframes plan-puls{
  0%{transform:scale(1)} 40%{transform:scale(1.12);box-shadow:0 0 0 6px rgb(235 75 0/.14)}
  100%{transform:scale(1)}
}
/* Besetzt durch CURAWEL: Markenblau, weiße Schrift, kleines Häkchen. */
.z--offen.is-besetzt{
  background:var(--marke);color:#fff;border:1.5px solid var(--marke);
}
.z--offen.is-besetzt::after{
  content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;
  background:#7ee2a8;
}

.plan__log{
  display:flex;align-items:center;gap:.55rem;min-height:1.6rem;
  font-size:.82rem;color:var(--navy);
  border-top:1px solid var(--linie-zart);padding-top:.8rem;
}
.plan__log svg{width:16px;height:16px;flex:none;color:var(--marke)}
.plan__log span{transition:opacity .2s var(--ease)}
.plan__log.is-tausch span{opacity:0}

.plan__legende{
  display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:0;padding:0;list-style:none;
  font-size:.72rem;color:var(--gedaempft);
}
.plan__legende li{display:inline-flex;align-items:center;gap:.4rem}
.plan__legende i{width:.8rem;height:.8rem;border-radius:3px;display:inline-block}
.plan__legende .l-team{background:var(--flaeche);border:1px solid var(--linie)}
.plan__legende .l-offen{background:#fff6f1;border:1.5px dashed var(--akzent)}
.plan__legende .l-cw{background:var(--marke)}

.plan__cap{font-size:.84rem;color:var(--navy);font-weight:600;line-height:1.45;margin:0}

@media (min-width:1040px){
  .hero--rechner > .wrap > .plan{grid-column:2;grid-row:1 / span 2;align-self:start}
}
@media (max-width:420px){
  .plan__raster{grid-template-columns:2.1rem repeat(7,minmax(0,1fr));gap:3px}
  .z{height:1.9rem;font-size:.6rem;border-radius:5px}
  .plan__tag,.plan__schicht{font-size:.58rem;letter-spacing:.03em}
}
@media (prefers-reduced-motion:reduce){
  .z,.plan__zaehler,.plan__log span{transition:none}
  .z--offen.is-dran{animation:none}
}

/* Der Bedarfsrechner auf /wie-funktionierts/: dort als Karte mittig. */
.rechner--seite{max-width:640px;margin-inline:auto}

/* ============================================================================
   Drei Fassungen des Helden, 30.09.2026
   Nur eine ist sichtbar. Die Vorschau-Leiste schaltet um, auf curawel.de gibt
   es die Leiste nicht und es bleibt beim Dienstplan. [hidden] braucht hier
   !important, sonst gewinnt display:grid aus .rechner und .eintrag.
   ========================================================================= */
[data-held][hidden]{display:none!important}
@media (min-width:1040px){
  .hero--rechner > .wrap > [data-held]{grid-column:2;grid-row:1 / span 2;align-self:start}
}

/* ---------------------------------------------------------- Fassung Eintrag
   Ein Ausschnitt aus exaPool. Die Fensterleiste mit den drei Punkten sagt
   "das ist ein Bild der Anwendung", damit niemand den Knopf darin anklickt:
   er ist ein span, ohne Zeiger, ohne Fokus. */
.eintrag{
  position:relative;z-index:1;margin:0;width:100%;max-width:520px;justify-self:center;
  background:#fff;border:1px solid var(--linie);border-radius:var(--kante-karte);
  box-shadow:0 30px 60px -30px rgb(var(--schatten-ton)/.45);overflow:hidden;
  display:grid;
}
.eintrag__leiste{
  display:flex;align-items:center;gap:6px;padding:.65rem 1rem;
  background:var(--flaeche);border-bottom:1px solid var(--linie-zart);
}
.eintrag__leiste i{width:9px;height:9px;border-radius:50%;background:var(--linie)}
.eintrag__leiste span{margin-left:.5rem;font-size:.74rem;font-weight:600;color:var(--gedaempft);letter-spacing:.02em}
.eintrag__maske{display:grid;gap:.55rem;padding:1.1rem 1.25rem .9rem}
.eintrag__titel{
  margin:0 0 .25rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font-weight:700;font-size:1rem;color:var(--navy);
}
.eintrag__titel span{font-size:.76rem;font-weight:600;color:var(--gedaempft)}
.eintrag__feld{
  display:grid;grid-template-columns:7.2rem 1fr;align-items:center;gap:.75rem;
  font-size:.86rem;
}
.eintrag__feld span{color:var(--gedaempft);font-size:.78rem;letter-spacing:.02em}
.eintrag__feld b{
  display:block;min-height:2.3rem;padding:.55rem .75rem;border-radius:9px;
  background:var(--flaeche);border:1px solid var(--linie);color:var(--navy);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.eintrag__feld b.is-tippt{border-color:var(--marke);box-shadow:0 0 0 3px rgb(30 112 187/.14)}
.eintrag__feld b.is-tippt::after{
  content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-2px;
  background:var(--marke);animation:caret 1s steps(1) infinite;
}
@keyframes caret{50%{opacity:0}}
.eintrag__knopf{
  justify-self:end;margin-top:.35rem;padding:.6rem 1.15rem;border-radius:999px;
  background:var(--orange-voll);color:#fff;font-weight:700;font-size:.86rem;
  cursor:default;user-select:none;
  transition:transform .12s var(--ease),background-color .2s var(--ease);
}
.eintrag__knopf.is-gedrueckt{transform:scale(.96);background:var(--akzent-tief)}
.eintrag__verlauf{
  list-style:none;margin:0;padding:.85rem 1.25rem 1rem;display:grid;gap:.5rem;
  border-top:1px solid var(--linie-zart);background:linear-gradient(var(--flaeche),#fff);
}
.eintrag__verlauf li{
  display:flex;align-items:center;gap:.6rem;font-size:.84rem;color:var(--gedaempft);
  opacity:.45;transform:translateY(4px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),color .35s var(--ease);
}
.eintrag__verlauf li::before{
  content:"";flex:none;width:1.15rem;height:1.15rem;border-radius:50%;
  border:1.5px solid var(--linie);background:#fff;
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.eintrag__verlauf li.is-da{opacity:1;transform:none;color:var(--navy)}
.eintrag__verlauf li.is-da::before{
  background:#1f9d57 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;
  border-color:#1f9d57;
}
.eintrag__verlauf li:last-child.is-da{font-weight:700}
.eintrag__cap{padding:0 1.25rem 1.15rem;font-size:.84rem;font-weight:600;color:var(--navy);line-height:1.45}
@media (max-width:420px){
  .eintrag__feld{grid-template-columns:5.6rem 1fr;gap:.5rem}
  .eintrag__feld b{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .eintrag__verlauf li,.eintrag__knopf,.eintrag__feld b{transition:none}
  .eintrag__feld b.is-tippt::after{animation:none}
}

/* ============================================================================
   Stil "neu", 30.09.2026
   Emre: "die Buttons verschönern, einiges animieren, und generell das Design
   bisschen modernisieren". Die Marke bleibt, wie sie ist: Blau, Orange und
   Navy aus dem Logo, Jost und Inter. Geändert sind nur Bausteine, zentral an
   einer Stelle, nicht Seite für Seite:

     Knöpfe   Tiefe, ein Pfeil, der beim Zeigen nachrückt, Druckgefühl
     Karten   heben sich, wenn sie ein Link sind, und nur dann
     Kopf     Milchglas beim Scrollen
     Held     die Zeilen kommen beim Laden nacheinander, nicht alle auf einmal
     Menü     ein Strich wächst unter dem Punkt, auf den man zeigt

   Alles hängt an html.stil-neu, fest im HTML. Einen Umschalter Neu/Bisher
   gab es kurz, Emre am 30.09.: "das brauchen wir auch nicht".

   Kurven und Dauern: --ease ist die vorhandene ease-out-Kurve, es gibt
   keine zweite. Knopfdruck 120ms, Zeigen 180ms, Einblenden im Helden 700ms
   mit 70ms Versatz. Nur transform und opacity werden bewegt. Zeige-Effekte
   gelten nur für echte Mäuse, weil ein Finger auf dem Telefon sonst ein
   "Zeigen" auslöst, das nicht mehr weggeht.
   ========================================================================= */

/* ---------------------------------------------------------------- Knöpfe */
.stil-neu .btn{
  position:relative;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease);
}
.stil-neu .btn:not(.btn--ghost):not(.btn--white):not(.btn--outline-white){
  box-shadow:inset 0 1px 0 rgb(255 255 255/.22),0 10px 22px -12px rgb(195 63 0/.75);
}
/* Der Pfeil: nur an Knöpfen ohne eigenes Symbol, sonst stehen zwei Zeichen
   an einem Knopf. Er ist eine Maske, damit er die Textfarbe übernimmt.
   Er sitzt auf ::before und wird per order hinter den Text gesetzt, denn
   ::after gehört dem Glanzstreifen aus _Kern/effekte.css. */
.stil-neu .btn:not(.btn--icon):not(:has(svg))::before{
  content:"";order:1;flex:none;width:1em;height:1em;margin-right:-.2rem;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-4.5-4.5L15 10l-4.5 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-4.5-4.5L15 10l-4.5 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .18s var(--ease);
}
/* Doppelt .btn, damit die Ausnahme stärker ist als die Pfeilregel oben:
   deren :not()-Teile zählen mit, und die Schwebeleiste hat sonst Pfeile. */
.stil-neu .dock .btn.btn::before{content:none}
.stil-neu .btn--ghost{background:#fff;border-width:1.5px}
.stil-neu .btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .stil-neu .btn:hover{transform:translateY(-1px)}
  .stil-neu .btn:not(.btn--ghost):not(.btn--white):not(.btn--outline-white):hover{
    box-shadow:inset 0 1px 0 rgb(255 255 255/.22),0 16px 28px -14px rgb(195 63 0/.8);
  }
  .stil-neu .btn:hover::before{transform:translateX(3px)}
  /* Vorher füllte sich der helle Knopf beim Zeigen ganz navy, das war der
     lauteste Wechsel auf der Seite. Jetzt nur Kante und Schrift in Blau. */
  .stil-neu .btn--ghost:hover{background:#fff;border-color:var(--marke);color:var(--marke-tief)}
  .stil-neu .btn:active{transform:scale(.97)}
}

/* ---------------------------------------------------------------- Karten */
.stil-neu .linkcard,.stil-neu a.card{
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),
             border-color .2s var(--ease),background-color .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .stil-neu .linkcard:hover,.stil-neu a.card:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 40px -26px rgb(var(--schatten-ton)/.55);
    border-color:var(--marke-hell);
  }
}

/* ------------------------------------------------------------- Kopfzeile */
.stil-neu .hdr.is-stuck{
  background:rgb(255 255 255/.86);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
}
.stil-neu .hdr__nav > ul > li > a{position:relative}
.stil-neu .hdr__nav > ul > li > a::after{
  content:"";position:absolute;left:.1rem;right:.1rem;bottom:-.35rem;height:2px;border-radius:2px;
  background:var(--orange-voll);transform:scaleX(0);transform-origin:left center;
  transition:transform .2s var(--ease);
}
.stil-neu .hdr__nav > ul > li > a[aria-current]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .stil-neu .hdr__nav > ul > li:hover > a::after{transform:scaleX(1)}
}

/* ---------------------------------------------------- Held beim Laden
   Einmal pro Seitenaufruf, also Delight-Stufe: darf länger sein als UI.
   Die Zeilen kommen nacheinander, 70ms Versatz, und das Bild rechts als
   letztes. Bewegt werden die Kinder, nicht .hero__copy selbst, denn das
   schiebt beim Scrollen schon die Tiefenbewegung. */
@keyframes held-ein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes held-bild{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes strich{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.stil-neu .hero__copy > *,.stil-neu .phero__in > *{animation:held-ein .7s var(--ease) both}
.stil-neu .hero__copy > :nth-child(2),.stil-neu .phero__in > :nth-child(2){animation-delay:.07s}
.stil-neu .hero__copy > :nth-child(3),.stil-neu .phero__in > :nth-child(3){animation-delay:.14s}
.stil-neu .hero__copy > :nth-child(4),.stil-neu .phero__in > :nth-child(4){animation-delay:.21s}
.stil-neu .hero__copy > :nth-child(5),.stil-neu .phero__in > :nth-child(5){animation-delay:.28s}
.stil-neu .hero__copy > :nth-child(n+6){animation-delay:.35s}
.stil-neu .hero .h1--zeilen .zeile{display:block;animation:held-ein .7s var(--ease) both}
.stil-neu .hero .h1--zeilen .zeile + .zeile{animation-delay:.16s}
.stil-neu .hero__in > [data-held]:not([hidden]){animation:held-bild .8s var(--ease) .3s both}
.stil-neu .eyebrow::before{animation:strich .6s var(--ease) .15s both}
@media (prefers-reduced-motion:reduce){
  /* Weniger Bewegung heißt hier: nur Überblenden, kein Rutschen. */
  @keyframes held-ruhig{from{opacity:0}to{opacity:1}}
  .stil-neu .hero__copy > *,.stil-neu .phero__in > *,.stil-neu .hero .h1--zeilen .zeile,
  .stil-neu .hero__in > [data-held]:not([hidden]){animation:held-ruhig .25s ease both;animation-delay:0s}
  .stil-neu .eyebrow::before{animation:none}
  .stil-neu .btn,.stil-neu .btn::before,.stil-neu .linkcard,.stil-neu a.card{transition:none}
}

/* ======================================================= Vorschau-Leiste
   Dieselbe Leiste wie bei den anderen Pitches auf der Vorschau (Sporthotel,
   VSCR, PMP): dunkel, lila "Vorschau", Segment-Umschalter. Wird nur auf
   preview.* und lokal vom Skript eingesetzt, nie auf curawel.de. Unter
   1200px sitzt sie über der Schwebeleiste. */
@keyframes vkpulse{0%,100%{box-shadow:0 10px 30px rgba(0,0,0,.34)}50%{box-shadow:0 12px 38px rgba(124,58,237,.5)}}
.vk-bar{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);width:max-content;z-index:2147483645;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;background:linear-gradient(135deg,#211b34,#0f0f17);color:#fff;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.34);max-width:calc(100vw - 20px);animation:vkpulse 3.5s ease-in-out infinite}
.vk-tag{background:#7c3aed;color:#fff;font-weight:800;font-size:10.5px;letter-spacing:.6px;padding:5px 10px;border-radius:999px;text-transform:uppercase}
.vk-kind{font-size:12px;opacity:.7;font-weight:600;white-space:nowrap}
.vk-seg{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.09);padding:4px;border-radius:999px}
.vk-p{padding:7px 14px;border-radius:999px;border:0;background:none;cursor:pointer;font:inherit;font-weight:600;font-size:13.5px;color:#fff;white-space:nowrap;transition:background-color .15s,color .15s}
.vk-p[aria-pressed="true"]{background:#fff;color:#141018;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.vk-p[aria-pressed="false"]:hover{background:rgba(255,255,255,.2)}
.vk-p:focus-visible{outline:2px solid #c4b5fd;outline-offset:2px}
@media (max-width:1199px){.vk-bar{bottom:84px}}
@media (max-width:620px){
  .vk-bar{border-radius:18px;gap:8px;padding:8px 10px;width:calc(100vw - 20px)}
  .vk-kind{display:none}
  .vk-p{padding:6px 10px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.vk-bar{animation:none}}
/* Die Überschrift kommt zeilenweise, also nicht noch einmal als Ganzes. */
.stil-neu .hero__copy > .h1--zeilen{animation:none}
/* Titel und Umschalter einer Gruppe bleiben zusammen, umbrochen wird nur
   zwischen den Gruppen. Und width:max-content, sonst bekommt die Leiste
   wegen left:50% nur die halbe Fensterbreite und bricht ohne Not um. */
.vk-grp{display:inline-flex;align-items:center;gap:8px}

/* ------------------------------------------------------- Fassung Verbindung
   Das Sternbild der CWG, diesmal mit Bedeutung: oben links eine Einrichtung
   mit offenem Dienst, unten rechts eine Fachkraft, die Zeit hat, in der
   Mitte exaPool als Knoten. Die Punkte drumherum sind weitere Fachkräfte
   aus der Region. Ablauf in vier Stufen, gesetzt vom Skript als Klasse:

     v-1  die Linie läuft von der Einrichtung zu exaPool
     v-2  exaPool fächert Strahlen zu passenden Fachkräften aus
     v-3  eine nimmt an: die Linie läuft zu ihr, ihre Karte leuchtet auf
     v-4  die Einrichtung springt auf "besetzt"

   Gezeichnet wird über stroke-dashoffset mit pathLength="1": jede Linie ist
   eins lang, egal wie lang sie auf dem Bildschirm ist. */
.verbindung{
  position:relative;z-index:1;margin:0;width:100%;max-width:520px;justify-self:center;
  display:grid;gap:.7rem;
}
.verbindung__buehne{position:relative;aspect-ratio:8 / 7}
.verbindung__netz{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.v-kante{stroke:var(--marke);stroke-opacity:.16;stroke-width:1}
.v-stern{fill:var(--marke);fill-opacity:.45}
.v-strich{
  fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .7s var(--ease),stroke .3s var(--ease);
}
.v-strahl{stroke:var(--marke);stroke-opacity:.5;stroke-width:1.5;transition-delay:calc(var(--n) * 90ms)}
.v-weg{stroke:var(--orange-voll);stroke-width:3}
.v-weg--raus{stroke:var(--marke)}
.v-kern__hof{fill:var(--marke);fill-opacity:.08;transform-box:fill-box;transform-origin:center;
  transition:transform .5s var(--ease),fill-opacity .5s var(--ease)}
.v-kern__punkt{fill:#fff;stroke:var(--marke);stroke-width:1.5}
.v-kern text{font-family:var(--schrift-text);font-size:12.5px;font-weight:700;fill:var(--navy);letter-spacing:.01em}

.verbindung.v-1 .v-weg--rein,
.verbindung.v-2 .v-weg--rein,.verbindung.v-3 .v-weg--rein,.verbindung.v-4 .v-weg--rein{stroke-dashoffset:0}
.verbindung.v-2 .v-strahl,.verbindung.v-3 .v-strahl,.verbindung.v-4 .v-strahl{stroke-dashoffset:0}
.verbindung.v-2 .v-kern__hof{transform:scale(1.18);fill-opacity:.14}
.verbindung.v-3 .v-weg--raus,.verbindung.v-4 .v-weg--raus{stroke-dashoffset:0}
.verbindung.v-3 .v-strahl,.verbindung.v-4 .v-strahl{stroke-opacity:.18}

/* Die beiden Karten liegen über dem Netz. Sie sind undurchsichtig, damit die
   Linien unter ihnen hervorkommen, egal wie groß die Schrift auf dem
   jeweiligen Schirm ausfällt. */
.v-karte{
  position:absolute;width:56%;display:grid;gap:.2rem;
  background:#fff;border:1px solid var(--linie);border-radius:14px;
  padding:.75rem .9rem;box-shadow:0 18px 36px -24px rgb(var(--schatten-ton)/.5);
  transition:opacity .4s var(--ease),transform .4s var(--ease),border-color .4s var(--ease);
}
.v-karte--haus{top:0;left:0}
.v-karte--kraft{right:0;bottom:0;opacity:.55;transform:translateY(6px)}
.v-karte__ort{font-size:.72rem;color:var(--gedaempft);letter-spacing:.02em}
.v-karte b{font-size:.95rem;color:var(--navy);line-height:1.25}
.v-marke{
  justify-self:start;margin-top:.25rem;display:inline-flex;align-items:center;gap:.35rem;
  padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;background:#fff1ea;color:var(--akzent-voll);border:1px solid #f6cdb8;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.v-marke::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.v-karte--kraft .v-marke{background:var(--flaeche-2);color:var(--marke-tief);border-color:var(--linie)}
.verbindung.v-3 .v-karte--kraft,.verbindung.v-4 .v-karte--kraft{opacity:1;transform:none;border-color:var(--marke-hell)}
.verbindung.v-3 .v-karte--kraft .v-marke,.verbindung.v-4 .v-karte--kraft .v-marke,
.verbindung.v-4 .v-karte--haus .v-marke{background:#e6f4ea;color:#14663a;border-color:#bfe3cd}
.verbindung__cap{font-size:.84rem;font-weight:600;color:var(--navy);line-height:1.45}

/* Die Sterne funkeln nur, solange der Ablauf läuft. */
@keyframes funkeln{0%,100%{fill-opacity:.45}50%{fill-opacity:.12}}
.verbindung.laeuft .v-stern{animation:funkeln 2.6s ease-in-out infinite;animation-delay:calc(var(--n) * -.37s)}
@media (prefers-reduced-motion:reduce){
  .v-strich,.v-kern__hof,.v-karte,.v-marke{transition:none}
  .verbindung.laeuft .v-stern{animation:none}
}

/* =========================================================================
   Digitale Bausteine, 30.09.2026
   Emre: "Wir sind digital in der Pflege und modern, diese Seite sieht sehr
   statisch aus." Drei Bausteine zeigen exaPool dort, wo vorher nur Fotos und
   Text standen. Alle sind Illustrationen, keine echten Daten.

     .ui-status   Stand eines Dienstes: offen, angefragt, besetzt
     .ui-karte    kleine Karte aus exaPool, schwebt über einem Foto
     .pool        der dunkle exaPool-Abschnitt der Startseite
     .konsole     die Übersicht der Pflegedienstleitung darin

   Farben nur aus den Marken-Werten, Kurve --ease, bewegt werden nur
   transform und opacity. Alles, was unsichtbar anfängt, steht in
   prefers-reduced-motion:no-preference und hat im HTML den Endzustand.
   ========================================================================= */

/* ------------------------------------------------------------- Status */
.ui-status{
  justify-self:start;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  padding:.22rem .65rem;border-radius:999px;font-size:.7rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.3;
  background:#fff1ea;color:var(--akzent-voll);border:1px solid #f6cdb8;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.ui-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ui-status--frage{background:#eaf3fb;color:var(--marke-tief);border-color:var(--marke-hell)}
.ui-status--frage::before{animation:status-puls 1.2s ease-in-out infinite}
.ui-status--ok{background:#e6f4ea;color:#14663a;border-color:#bfe3cd}
@keyframes status-puls{0%,100%{opacity:1}50%{opacity:.25}}

/* ------------------------------------------------ Karte über dem Foto */
.card__bild{position:relative}
.ui-karte{
  position:absolute;left:clamp(.75rem,2vw,1.25rem);bottom:clamp(.75rem,2vw,1.25rem);
  width:min(250px,calc(100% - 1.5rem));display:grid;gap:.18rem;
  background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.7);border-radius:14px;
  padding:.75rem .9rem .85rem;
  box-shadow:0 22px 44px -18px rgb(var(--schatten-ton)/.55),0 2px 6px rgb(var(--schatten-ton)/.08);
}
.ui-karte--mail{left:auto;right:clamp(.75rem,2vw,1.25rem)}
.ui-karte__kopf{
  display:flex;align-items:center;gap:.4rem;margin-bottom:.15rem;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--marke-tief);
}
.ui-karte__kopf svg{width:14px;height:14px;flex:none}
.ui-karte b{font-size:.95rem;line-height:1.25;color:var(--navy)}
.ui-karte__zeile{font-size:.78rem;color:var(--gedaempft);line-height:1.35}
.ui-karte .ui-status{margin-top:.35rem}
.ui-karte__knoepfe{display:flex;gap:.4rem;margin-top:.45rem}
.ui-karte__knoepfe i{
  font-style:normal;font-size:.74rem;font-weight:700;padding:.3rem .75rem;border-radius:999px;
  background:var(--flaeche-2);color:var(--marke-tief);
}
.ui-karte__knoepfe i:first-child{background:var(--akzent);color:#fff}
@media (prefers-reduced-motion:no-preference){
  .ui-karte{animation:ui-schweben 6s ease-in-out infinite}
  .ui-karte--mail{animation-delay:-3s}
  .rise:not(.is-in) .ui-karte{opacity:0;transform:translateY(14px)}
  .rise.is-in .ui-karte{transition:opacity .6s var(--ease) .35s,transform .6s var(--ease) .35s}
}
@keyframes ui-schweben{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media (max-width:420px){.ui-karte{width:calc(100% - 1.5rem)}}

/* ---------------------------------------------- dunkler exaPool-Abschnitt */
.pool{position:relative;overflow:hidden;isolation:isolate}
.pool::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38rem 26rem at 88% 18%,rgb(30 112 187/.42),transparent 70%),
    radial-gradient(30rem 22rem at 8% 100%,rgb(235 90 30/.16),transparent 70%),
    radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.3px) 0 0/22px 22px;
}
.pool__in{
  display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
}
@media (max-width:960px){.pool__in{grid-template-columns:minmax(0,1fr)}}
.pool__text{display:grid;gap:1rem;justify-items:start}
.pool__text .h2{margin:0}
.pool__text p{margin:0;max-width:34rem}
.pool__punkte{
  list-style:none;margin:.5rem 0 .25rem;padding:0;width:100%;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;
}
.pool__punkte li{
  display:grid;gap:.25rem;padding:.9rem 1rem;border-radius:var(--r-s);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
}
.pool__punkte b{font-size:1.9rem;line-height:1;color:#fff;letter-spacing:-.04em}
.pool__punkte span{font-size:.82rem;line-height:1.35;color:rgba(255,255,255,.78)}
@media (max-width:480px){.pool__punkte{grid-template-columns:minmax(0,1fr)}
  .pool__punkte li{grid-template-columns:auto 1fr;align-items:center;gap:.8rem}}

/* ------------------------------------------------------------ Konsole */
.konsole{
  margin:0;position:relative;display:grid;gap:.85rem;min-width:0;
  background:#fff;color:var(--navy);border-radius:var(--kante-flaeche);
  padding:0 clamp(1rem,2.4vw,1.5rem) clamp(1rem,2.4vw,1.4rem);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);
}
.konsole::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 70px -10px rgb(30 112 187/.55);z-index:-1;
}
.konsole__leiste{
  display:flex;align-items:center;gap:.4rem;margin:0 calc(-1 * clamp(1rem,2.4vw,1.5rem));
  padding:.75rem 1rem;border-bottom:1px solid var(--linie);
}
.konsole__leiste i{width:9px;height:9px;border-radius:50%;background:var(--linie-kraeftig)}
.konsole__leiste span{margin-left:.5rem;font-size:.74rem;font-weight:600;color:var(--gedaempft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.konsole__kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.konsole__kopf b{display:block;font-size:1.05rem;color:var(--navy)}
.konsole__kopf span{font-size:.78rem;color:var(--gedaempft)}
.konsole__zahlen{display:flex;gap:.45rem}
.kz{display:inline-flex;align-items:baseline;gap:.3rem;padding:.3rem .7rem;border-radius:999px;
  font-size:.74rem;font-weight:600;background:var(--flaeche-2);color:var(--gedaempft)}
.kz b{display:inline;font-size:.95rem;font-variant-numeric:tabular-nums}
.kz--offen b{color:var(--akzent-voll)}
.kz--ok b{color:#14663a}
.konsole__balken{height:6px;border-radius:999px;background:var(--flaeche-2);overflow:hidden}
.konsole__balken i{display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--marke),#2f9e62);
  transform-origin:left;transform:scaleX(var(--anteil,1));transition:transform .6s var(--ease)}
.konsole__liste{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.k-zeile{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;align-items:center;gap:.8rem;
  padding:.6rem .75rem;border-radius:12px;border:1px solid var(--linie);background:#fff;
  transition:border-color .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease);
}
.k-tag{display:grid;font-size:.72rem;color:var(--gedaempft);line-height:1.2}
.k-tag b{font-size:.84rem;color:var(--navy)}
.k-was{display:grid;font-size:.76rem;color:var(--gedaempft);line-height:1.3;min-width:0}
.k-was b{font-size:.88rem;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-zeile.is-dran{border-color:var(--marke-hell);background:#f5f9fd;
  box-shadow:0 10px 24px -16px rgb(var(--schatten-ton)/.5)}
.konsole__cap{display:flex;align-items:center;gap:.55rem;font-size:.82rem;font-weight:600;color:var(--navy)}
.konsole__puls{width:8px;height:8px;border-radius:50%;background:#2f9e62;flex:none;position:relative}
.konsole__puls::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #2f9e62;opacity:0}
.konsole.laeuft .konsole__puls::after{animation:puls-ring 1.6s ease-out infinite}
@keyframes puls-ring{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.8)}}
[data-k-log]{transition:opacity .2s var(--ease)}
.konsole__cap.is-tausch [data-k-log]{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .k-zeile--neu.is-rein{animation:zeile-rein .55s var(--ease) both}
}
@keyframes zeile-rein{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .ui-status--frage::before,.konsole.laeuft .konsole__puls::after{animation:none}
  .konsole__balken i,.k-zeile{transition:none}
}
@media (max-width:480px){
  .k-zeile{grid-template-columns:2.4rem minmax(0,1fr) auto;gap:.55rem;padding:.55rem .6rem}
  .k-zeile .ui-status{font-size:.62rem;padding:.2rem .5rem;letter-spacing:.02em}
  .konsole__zahlen .kz{font-size:.7rem}
}
@media (max-width:340px){
  .k-zeile{grid-template-columns:2.4rem minmax(0,1fr)}
  .k-zeile .ui-status{grid-column:2}
}
.k-zeile[hidden]{display:none}

/* ------------------------------------------- Seitenkopf mit Bild, 30.09.2026
   Die Unterseiten hatten rechts im Kopf nur Leerraum. Auf den Seiten, die
   erklären, wie CURAWEL arbeitet, steht dort jetzt ein Ausschnitt aus
   exaPool: dieselben Bausteine wie auf der Startseite (Konsole, Eintrag,
   Verbindung, Karten), damit man überall dasselbe Werkzeug sieht.
   22.10.2026: hier stand max-width:none, dadurch lief der Text auf breiten
   Bildschirmen bis an den linken Rand statt an der Kante des Logos. */
.phero__in--bild{
  display:grid;align-items:center;justify-items:stretch;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);
}
.phero__text{display:grid;gap:1.1rem;justify-items:start;min-width:0}
.phero__visual{margin:0;min-width:0;display:grid;justify-items:center}
.phero__visual > *{width:100%;max-width:500px}
@media (max-width:960px){
  .phero__in--bild{grid-template-columns:minmax(0,1fr)}
  .phero__visual > *{max-width:520px}
}
.phero .konsole{box-shadow:0 30px 60px -30px rgb(var(--schatten-ton)/.45);border:1px solid var(--linie)}
.phero .konsole::after{display:none}

/* Zwei Karten übereinander, für die Fachkräfte-Seiten */
.ui-stapel{position:relative;display:grid;gap:.9rem;padding:1rem 0}
.ui-stapel .ui-karte{position:relative;left:auto;right:auto;bottom:auto;width:100%;max-width:340px}
.ui-stapel .ui-karte:nth-child(2){justify-self:end;margin-top:-.2rem}
.ui-stapel .ui-karte:nth-child(3){justify-self:center}
@media (prefers-reduced-motion:no-preference){
  .ui-stapel .ui-karte{animation:ui-schweben 6s ease-in-out infinite}
  .ui-stapel .ui-karte:nth-child(2){animation-delay:-2s}
  .ui-stapel .ui-karte:nth-child(3){animation-delay:-4s}
}
/* In der zweispaltigen Fassung hat die Überschrift gut die halbe Breite.
   Mit der vollen Größe brach sie auf fünf Zeilen um. */
.phero__in--bild .h1{font-size:clamp(2rem,1.2rem + 2.3vw,3.3rem);max-width:17ch}

/* =========================================================================
   Bewegung, die man sieht, 30.09.2026
   Emre auf dem großen Bildschirm: "was ist mit animationen? und der header
   pickt so weit oben". Zwei Ursachen, beide behoben:

   1. Die Notausgänge (hier nach 4 s, im Skript nach 2,5 s) schalteten die
      ganze Seite sichtbar, auch was noch weit unten lag. Beim Scrollen kam
      deshalb nichts mehr herein. Der CSS-Notausgang gilt jetzt nur ohne
      Skript (dann fehlt .bewegung), das Skript selbst hat ein Netz beim
      Scrollen.
   2. Die Einblendung war mit 14px und 0,5 s so zurückhaltend, dass man sie
      für keine hielt. Jetzt 34px und eine längere Kurve, Bilder zoomen aus,
      die Konsole kommt von rechts, Kacheln und Listen staffeln sich.
   ========================================================================= */
@media (prefers-reduced-motion:no-preference){
  .stil-neu.bewegung .rise:not(.is-in),
  .stil-neu.bewegung .illu:not(.is-in) img{animation:none}

  .stil-neu .rise{
    transform:translateY(34px);
    transition:opacity .75s var(--ease),transform .95s var(--ease);
  }
  .stil-neu .rise.is-in{transform:none}

  /* Fotos in Karten: kommen leicht vergrößert und setzen sich */
  .stil-neu .card__bild img{transition:transform 1.4s var(--ease)}
  .stil-neu .rise:not(.is-in) .card__bild img{transform:scale(1.12)}

  /* Die Konsole und das Foto neben einem Text kommen von der Seite */
  .stil-neu .konsole.rise:not(.is-in){transform:translate(48px,10px) scale(.97)}
  .stil-neu .pool__text.rise:not(.is-in){transform:translateX(-32px)}

  /* Staffeln: Leiste der Einsatzorte, die drei Punkte, die Zeilen der Konsole */
  .bewegung .orte__liste.rise:not(.is-in) > *,
  .bewegung .pool__punkte.rise:not(.is-in) > *,
  .bewegung .konsole.rise:not(.is-in) .k-zeile{opacity:0}
  .bewegung .orte__liste.rise.is-in > *,
  .bewegung .pool__punkte.rise.is-in > *,
  .bewegung .konsole.rise.is-in .k-zeile:not(.is-rein){
    animation:de-staffel .6s var(--ease) both;
    animation-delay:calc(var(--i,0) * 90ms + 150ms);
  }
  .bewegung .orte__liste.rise,.bewegung .pool__punkte.rise{opacity:1;transform:none}

  /* Kopf der Abschnitte: der Strich über der Überschrift zieht sich auf */
  .stil-neu .head.rise{border-top-color:transparent;position:relative}
  .stil-neu .head.rise::before{
    content:"";position:absolute;left:0;right:0;top:-3px;height:3px;
    background:var(--navy);transform-origin:left;transform:scaleX(0);
    transition:transform 1.1s var(--ease) .1s;
  }
  .stil-neu .head.rise.is-in::before{transform:scaleX(1)}
  .stil-neu .section--navy .head.rise::before{background:var(--orange)}

  /* Karte rechts im Helden kommt beim Laden herein, nur Lage und Größe,
     keine Deckkraft: sie steht also nie unsichtbar da. */
  .stil-neu .hero > .wrap > [data-held]:not([hidden]),
  .stil-neu .phero__visual > *{animation:karte-ein 1s var(--ease) .25s both}
  @keyframes karte-ein{from{transform:translateY(28px) scale(.965)}to{transform:none}}
}

/* Der Held füllt den Bildschirm, der Inhalt steht mittig statt oben. */
@media (min-width:1040px){
  .stil-neu .hero--rechner .hero__in{
    min-height:min(calc(100svh - 116px),900px);
    align-content:center;row-gap:clamp(1.6rem,3vh,2.6rem);
    padding-block:clamp(2.25rem,5vh,4rem);
  }
  .stil-neu .hero--rechner > .wrap > [data-held]{align-self:center;max-width:580px}
}
@media (min-width:1440px){
  .stil-neu .hero--rechner .h1{font-size:clamp(3.05rem,1.2rem + 2.2vw,3.9rem)}
  .stil-neu .hero--rechner .hero__lead{font-size:1.1rem;max-width:52ch}
}

/* =========================================================================
   Die Überschrift springt ein, 30.09.2026
   Emre: "können wir den header titel auch irgendwie animieren? es sieht alles
   so klar aus und statisch." Die Startseiten-H1 spielt ihren Satz:
     1. "Wenn jemand ausfällt," kommt Wort für Wort aus der Unschärfe
     2. "ausfällt," kippt weg (eigene Hülle .faellt, damit sich die Bewegung
        nicht mit der des Worts darin überschreibt)
     3. "springen wir ein." springt mit Überschwinger herein, im selben
        Moment richtet sich "ausfällt," wieder auf: aufgefangen
     4. ein oranger Schwung zieht sich unter die zweite Zeile
   Etwa 2,6 Sekunden, einmal pro Aufruf. Die Wörter (.wort, --i) setzt das
   Skript; ohne Skript und bei weniger Bewegung steht der Satz fertig da,
   der Schwung gezeichnet. Die Reissleine im Skript setzt .wort nach 2,5 s
   auf sichtbar, bis dahin ist die letzte Wortbewegung durch.
   Auf den Unterseiten kommt die H1 mit derselben Unschärfe herein.
   ========================================================================= */
.h1--sprung .zeile--fang{justify-self:start;position:relative}
.h1--sprung{padding-bottom:.22em}
.h1--sprung .springt{display:inline-block;transform-origin:50% 100%}
.h1--sprung .schwung{
  /* Breite ausdrücklich: ein SVG mit width:auto nimmt sein Seitenverhältnis
     aus der viewBox und ignoriert left/right. */
  position:absolute;left:-.04em;bottom:-.2em;height:.3em;width:calc(100% + .1em);
  overflow:visible;pointer-events:none;
}
.h1--sprung .schwung path{
  /* Kein vector-effect:non-scaling-stroke: damit rechnet Chrome die
     Strichlänge in Bildschirmpunkten statt in pathLength, der Schwung
     endete dann unter dem ersten Wort. */
  fill:none;stroke:var(--orange-voll);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:0;opacity:.85;
}
.wort{display:inline-block}
/* 22.10.2026: Ein Wort-Kästchen trennt nicht von selbst. Am Handy schob
   „Pflegepersonaluntergrenzen:“ die ganze Textspalte über den Rand, der
   Seitenkopf schnitt dann auch die Einleitung ab. Höchstens zeilenbreit,
   und wenn es nicht passt, mit Bindestrich getrennt. */
.wort{max-width:100%;-webkit-hyphens:auto;hyphens:auto}

@media (prefers-reduced-motion:no-preference){
  /* Die Zeilen selbst bewegen sich hier nicht, das machen die Wörter. */
  .stil-neu .hero .h1--sprung .zeile{animation:none}

  @keyframes wort-unscharf{
    from{opacity:0;filter:blur(12px);transform:translateY(.28em)}
    to{opacity:1;filter:blur(0);transform:none}
  }
  @keyframes wort-sprung{
    0%{opacity:0;transform:translateY(.75em) scale(.86) rotate(-3deg)}
    55%{opacity:1;transform:translateY(-.14em) scale(1.04) rotate(1deg)}
    78%{transform:translateY(.04em) scale(.99)}
    100%{opacity:1;transform:none}
  }
  /* "Springerpool" springt einmal hoch, federt auf und landet. */
  @keyframes springt-hoch{
    0%,100%{transform:none}
    18%{transform:translateY(.04em) scale(1.03,.94)}
    42%{transform:translateY(-.24em) scale(.98,1.04)}
    66%{transform:translateY(0) scale(1.03,.95)}
    82%{transform:translateY(-.05em)}
  }
  @keyframes schwung-zieht{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

  .h1--sprung .zeile--navy .wort{
    animation:wort-unscharf .7s var(--ease) both;
    animation-delay:calc(.12s + var(--i,0) * 90ms);
  }
  .h1--sprung .springt{animation:springt-hoch 1s cubic-bezier(.45,0,.3,1) .8s both}
  .h1--sprung .zeile--fang .wort{
    animation:wort-sprung .8s cubic-bezier(.3,1.35,.5,1) both;
    animation-delay:calc(1.25s + (var(--i,3) - 3) * 110ms);
  }
  .h1--sprung .schwung path{animation:schwung-zieht .8s var(--ease) 2.05s both}

  /* Unterseiten: dieselbe Unschärfe, schneller */
  .stil-neu .phero .h1 .wort{
    animation:wort-unscharf .6s var(--ease) both;
    animation-delay:calc(.1s + var(--i,0) * 55ms);
  }
}

/* =========================================================================
   Menü ruhiger, 30.09.2026
   Emre: "beim header ist ein problem, da es unterstrichen wird und das
   menübalken öffnet". Beim Zeigen auf einen Punkt mit Untermenü lagen drei
   orange Linien übereinander: der alte Rand unten an der Leiste
   (border-bottom), der neue Strich unter dem Wort (::after, stil-neu) und die
   orange Oberkante des Klappfelds. Dazu ging das Feld schon beim bloßen
   Überfahren auf.
   Jetzt: der alte Rand ist aus. Der Strich bleibt für die Seite, auf der man
   ist, und beim Zeigen nur auf Punkten ohne Untermenü. Bei Punkten mit
   Untermenü ist das aufgehende Feld die Rückmeldung, dazu dreht ein kleiner
   Pfeil. Das Feld schwebt mit Abstand, ohne orange Kante, und öffnet mit
   kurzer Verzögerung, damit es beim Durchfahren nicht aufblitzt.
   ========================================================================= */
.stil-neu .hdr__nav > ul > li > a,
.stil-neu .hdr__nav > ul > li > a:hover,
.stil-neu .hdr__nav > ul > li > a[aria-current]{border-bottom-color:transparent}
@media (hover:hover) and (pointer:fine){
  .stil-neu .hdr__nav > ul > li.has-sub:hover > a:not([aria-current])::after{transform:scaleX(0)}
}
.stil-neu .hdr__nav > ul > li.has-sub > a{gap:.4rem}
.stil-neu .hdr__nav > ul > li.has-sub > a::before{
  content:"";order:1;width:.42em;height:.42em;margin-top:-.22em;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);opacity:.55;transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.stil-neu .hdr__nav > ul > li.has-sub:hover > a::before,
.stil-neu .hdr__nav > ul > li.has-sub:focus-within > a::before{transform:translateY(.18em) rotate(225deg);opacity:1}

.stil-neu .subnav{
  top:calc(100% + 6px);border-top:1px solid var(--linie);
  box-shadow:0 24px 50px -20px rgb(var(--schatten-ton)/.35),0 2px 6px rgb(var(--schatten-ton)/.06);
  transform:translateY(-6px);
  transition:opacity .18s var(--ease) .12s,transform .18s var(--ease) .12s,visibility 0s linear .3s;
}
/* Unsichtbare Brücke über den Abstand, sonst schließt das Feld, wenn die
   Maus vom Punkt nach unten fährt. */
.stil-neu .subnav::before{inset:-10px 0 auto 0;height:10px}
.stil-neu .has-sub:hover .subnav,.stil-neu .has-sub:focus-within .subnav,.stil-neu .subnav.is-open{
  transition:opacity .18s var(--ease) .09s,transform .18s var(--ease) .09s,visibility 0s linear .09s;
}
@media (prefers-reduced-motion:reduce){
  .stil-neu .subnav,.stil-neu .has-sub:hover .subnav{transition:none}
}

/* =========================================================================
   Logo-Blau statt Navy, 30.09.2026
   Emre: "das Blau am Header ist nicht das Blau vom Logo". Gemessen: die
   Oberleiste und die Hauptüberschrift standen in Navy #052b59, das Logo hat
   #1e70bb. Der Original-Styleguide von moremedia (04 Ressourcen/Logos/
   Curawel CI) sagt dasselbe: Headline 1 in Blau #1e70bb, Navy ist
   Hintergrundfarbe. Weiß auf #1e70bb hat 4,9:1, reicht auch für die
   kleinen Pillen in der Leiste.
   ========================================================================= */
.stil-neu .h1,.stil-neu .h1 .zeile--navy{color:var(--marke)}
.stil-neu .topbar{background:var(--marke)}