/* 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 pflegegruppe.css */
/* Die Schrift steht seit 06.09.2026 im Kern und gilt fuer alle vier Marken:
   Jost fuer Ueberschriften, Inter fuer den Fliesstext, siehe _Kern/tokens.css. */
/* Form kommt aus _Kern/tokens.css, hier nur die Namen dieser Seite. */
:root{
    --blue:var(--marke); --blue-600:var(--marke-tief); --blue-700:var(--dunkel);
    --orange:var(--akzent); --orange-cta:var(--akzent-voll); --orange-600:var(--akzent-tief);
    --teal:#12a0b0; --teal-bright:#25bcd0;
    --ink:var(--text); --ink-soft:#40566a;
    --navy:var(--dunkel);
    --bg:var(--grund); --surface:var(--flaeche); --surface-2:var(--flaeche-2);
    --line:var(--linie);
    --muted:var(--gedaempft);
    --glass:rgba(255,255,255,.72);
    --r-lg:var(--r-l); --r-md:var(--r-m); --r-sm:var(--r-s); --r-full:var(--r-voll);
    --max:var(--wrap);
    --sp:var(--sec);
    --grad:linear-gradient(120deg,var(--marke),var(--teal));
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  /* Der Kopf klebt oben, ohne diesen Abstand landet die Ueberschrift beim
     Sprung dahinter. */
  section[id]{scroll-margin-top:96px}
  body{
    font-family:var(--schrift-text);
    background:var(--bg);color:var(--ink);
    font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip;
    font-weight:400;font-synthesis:none;overflow-wrap:break-word;
  }
  h1,h2,h3,h4{font-family:var(--schrift-display);font-weight:600;line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
  a{color:inherit;text-decoration:none}
  /* Seit 06.09.2026 traegt jedes img die echten Masse als Attribut, damit der
     Browser Platz reserviert. height:auto verhindert, dass die Attribute das
     Seitenverhaeltnis erzwingen, wo die CSS-Breite kleiner ist. */
  img{display:block;max-width:100%;height:auto}
  :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
  ::selection{background:var(--orange);color:#fff}
  .wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}

  /* Gradient text */
  .gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* Eyebrow pill */
  .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:rgba(30,112,187,.09);padding:7px 15px;border-radius:var(--r-full)}
  .eyebrow.on-dark{color:#bcd8f5;background:rgba(255,255,255,.08)}
  .eyebrow .d{width:6px;height:6px;border-radius:50%;background:var(--orange)}

  /* Buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--schrift-text);font-weight:600;font-size:1rem;padding:15px 28px;border-radius:var(--r-full);cursor:pointer;border:1.5px solid transparent;transition:transform .2s cubic-bezier(.34,1.4,.64,1),box-shadow .2s,background .2s,color .2s,border-color .2s;min-height:52px;position:relative;overflow:hidden;white-space:nowrap}
  .btn svg{width:18px;height:18px;transition:transform .25s}
  .btn:hover svg{transform:translateX(4px)}
  .btn-cta{background:var(--orange-cta);color:#fff;box-shadow:0 8px 22px rgba(216,68,0,.32)}
  .btn-cta:hover{background:var(--orange-600);transform:translateY(-3px);box-shadow:0 14px 30px rgba(216,68,0,.4)}
  .btn-blue{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(30,112,187,.28)}
  .btn-blue:hover{background:var(--blue-600);transform:translateY(-3px)}
  .btn-ghost{background:rgba(255,255,255,.5);color:var(--ink);border-color:var(--line);backdrop-filter:blur(8px)}
  .btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-3px)}
  .btn-light{background:#fff;color:var(--blue)}
  .btn-light:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
  .btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
  .btn-outline-light:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}

  /* Member of CWG + Markenfamilie */
  /* 08.09.2026 gemessen: das eigene Logo war 110 Pixel breit, das fremde
     Signet daneben 131. Die Wortmarke war damit kleiner als der Zusatz.
     Jetzt: Logo groesser, Signet kleiner, Abstand enger. */
  .brand{display:flex;align-items:center;gap:14px;min-height:44px}
  .brand-cwg{height:20px;width:auto;display:block;flex-shrink:0}
  .footer-cwg{height:24px;width:auto;display:block;margin:0 0 18px}
  .fam-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:38px}
  .fam{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 24px;box-shadow:var(--sh-1);transition:transform .25s,box-shadow .25s,border-color .25s}
  a.fam:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--blue)}
  .fam.self{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--sh-1);background:linear-gradient(180deg,rgba(30,112,187,.05),var(--surface))}
  /* curawel.svg bringt nur eine viewBox mit, ohne feste Hoehe faellt es auf 0 zusammen */
  .fam-logo{height:36px;display:flex;align-items:center;margin-bottom:18px}
  /* Die vier Logos haben ganz verschiedene Proportionen, deshalb je eine eigene Hoehe,
     damit sie optisch gleich gross wirken. curawel.svg hat nur eine viewBox, ohne feste
     Hoehe faellt es auf 0 zusammen. */
  .fam-logo img{width:auto;max-width:200px;object-fit:contain;object-position:left center}
  .fam-logo img.l-pflegegruppe{height:36px}
  .fam-logo img.l-austrify{height:30px}
  .fam-logo img.l-curawel{height:21px}
  .fam-logo img.l-welmoa{height:19px}
  .fam h2,.fam h3{font-size:1.02rem;margin-bottom:7px}
  .fam p{font-size:.93rem;color:var(--ink-soft);flex:1;line-height:1.5}
  .fam .tl{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:.83rem;font-weight:600;color:var(--blue)}
  .fam.self .tl{color:var(--orange-cta)}
  .fam .tl svg{width:14px;height:14px}
  .fam-note{margin-top:24px;max-width:88ch;margin-left:auto;margin-right:auto;background:var(--surface-2);border-radius:var(--r-md);padding:22px 26px;font-size:.96rem;color:var(--ink-soft)}
  .fam-note b{color:var(--ink)}
  @media (max-width:900px){.brand{gap:16px}.brand-cwg{height:19px}}
  @media (max-width:520px){.brand-cwg{display:none}}

  /* Scroll progress */
  #progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:200;transition:width .1s linear}

  /* Header */
  header{position:sticky;top:0;z-index:100;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
  header.scrolled{background:rgba(245,248,253,.82);backdrop-filter:saturate(180%) blur(16px);box-shadow:0 1px 0 var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
  .brand-logo{height:47px;width:auto;display:block}
  .nav-links{display:flex;align-items:center;gap:2px}
  .nav-links a{padding:10px 15px;border-radius:var(--r-full);font-weight:500;font-size:.97rem;position:relative;transition:color .15s}
  /* Die Unterstreichung je Punkt ist am 06.09.2026 dem Gleiter gewichen.
     Nur der aktive Punkt behaelt eine, siehe .nav-punkt.ist-hier::after. */
  .nav-links a:hover{color:var(--blue)}
  .nav-cta{display:flex;align-items:center;gap:10px}
  .nav-cta .btn{padding:11px 20px;min-height:44px;font-size:.94rem}
  .burger{display:none;width:48px;height:48px;border:1.5px solid var(--line);background:rgba(255,255,255,.6);border-radius:14px;cursor:pointer;color:var(--ink)}
  .burger svg{width:24px;height:24px;margin:auto}

  /* HERO */
  .hero{position:relative;padding:clamp(40px,6vw,72px) 0 clamp(60px,8vw,100px);overflow:clip}
  .aurora{position:absolute;inset:0;z-index:-2;overflow:hidden}
  .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
  .orb.o1{width:520px;height:520px;background:radial-gradient(circle,rgba(30,112,187,.6),transparent 68%);top:-160px;right:-120px;animation:drift1 22s ease-in-out infinite alternate}
  .orb.o2{width:440px;height:440px;background:radial-gradient(circle,rgba(235,75,0,.42),transparent 68%);top:120px;left:-140px;animation:drift2 26s ease-in-out infinite alternate}
  .orb.o3{width:360px;height:360px;background:radial-gradient(circle,rgba(30,112,187,.35),transparent 70%);bottom:-140px;left:40%;animation:drift3 30s ease-in-out infinite alternate}
  @keyframes drift1{to{transform:translate(-80px,60px) scale(1.1)}}
  @keyframes drift2{to{transform:translate(70px,-50px) scale(1.15)}}
  @keyframes drift3{to{transform:translate(-60px,-40px) scale(1.05)}}
  .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,64px);align-items:center}
  .hero .rate{display:inline-flex;align-items:center;gap:11px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);padding:8px 16px 8px 9px;border-radius:var(--r-full);box-shadow:var(--sh-1);font-size:.9rem;color:var(--muted);margin-bottom:26px}
  .hero .rate .st{color:#c77b0a;letter-spacing:1px}
  .hero .rate b{color:var(--ink);font-weight:700}
  .hero .rate .dot{width:4px;height:4px;border-radius:50%;background:var(--line)}
  .hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem);font-weight:600;margin-bottom:24px;letter-spacing:-.02em}
  .hero p.lead{font-size:1.2rem;color:var(--ink-soft);max-width:40ch;margin-bottom:34px;line-height:1.55}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
  .hero-facts{display:flex;gap:20px;flex-wrap:wrap;font-size:.92rem;color:var(--muted)}
  .hero-facts span{display:inline-flex;align-items:center;gap:8px}
  .hero-facts svg{width:18px;height:18px;color:var(--orange)}

  /* Hero visual cluster */
  .hv{position:relative;height:min(560px,72vw)}
  .hv-main{position:absolute;inset:0 0 0 12%;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,var(--blue),var(--blue-700));box-shadow:var(--sh-3)}
  .hv-main img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
  .hv:hover .hv-main img{transform:scale(1.05)}
  .hv-inset{position:absolute;left:-2%;bottom:12%;width:44%;aspect-ratio:1/1.12;border-radius:var(--r-md);overflow:hidden;border:5px solid #fff;background:linear-gradient(160deg,var(--orange),#ff8a4d);box-shadow:var(--sh-2);animation:floaty 6s ease-in-out infinite}
  .hv-inset img{width:100%;height:100%;object-fit:cover}
  @keyframes floaty{50%{transform:translateY(-14px)}}
  .hv-card{position:absolute;background:var(--glass);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);border-radius:var(--r-sm);padding:14px 16px;box-shadow:var(--sh-2);display:flex;align-items:center;gap:12px}
  .hv-card .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}
  .hv-card .ic svg{width:22px;height:22px}
  .hv-card .n{display:block;font-family:var(--schrift-display);font-weight:700;font-size:1.25rem;line-height:1;color:var(--ink)}
  .hv-card .l{display:block;font-size:.8rem;color:var(--muted);margin-top:3px}
  .hv-card.c1{top:8%;right:-2%;animation:floaty 7s ease-in-out infinite .5s}
  .hv-card.c1 .ic{background:rgba(30,112,187,.14);color:var(--blue)}
  .hv-card.c2{bottom:22%;right:6%;animation:floaty 8s ease-in-out infinite 1s}
  .hv-card.c2 .ic{background:rgba(235,75,0,.14);color:var(--orange)}

  /* Role marquee */
  .rolestrip{margin-top:clamp(40px,5vw,60px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .marquee{display:flex;gap:0;width:max-content;animation:scroll-x 38s linear infinite}
  .marquee.rev{animation-direction:reverse}
  .rolestrip:hover .marquee{animation-play-state:paused}
  @keyframes scroll-x{to{transform:translateX(-50%)}}
  .role{display:inline-flex;align-items:center;gap:12px;padding:0 26px;font-family:var(--schrift-display);font-weight:600;font-size:1.05rem;color:var(--ink-soft);white-space:nowrap}
  .role svg{width:16px;height:16px;color:var(--orange)}

  /* Section */
  /* Abstandsstufen                                    vereinheitlicht 07.09.2026
     Vorher trug jede Sektion ihren Abstand als style="padding-top:0" oder
     style="padding-bottom:0" im Markup, elfmal, und zwei Kapitelgrenzen
     bekamen dadurch den doppelten Abstand. Jetzt gibt es drei Klassen und
     eine Regel:

       .pad-o   Abstand nur nach oben. Der Normalfall. Jedes Kapitel bringt
                seinen eigenen Kopfabstand mit, dann steht ueberall genau --sp.
       .pad     oben und unten. Fuer Baender (die tragen ihr Polster selbst)
                und fuer die Sektion direkt vor einem Band.
       .pad-u   nur nach unten. Fuer den Sonderfall am Anfang.

     .pad-t ist NICHT frei, das gehoert seit jeher den Kacheln (.tile.pad-t). */
  section.pad{padding:var(--sp) 0}
  section.pad-o{padding:var(--sp) 0 0}
  section.pad-u{padding:0 0 var(--sp)}
  .head{max-width:660px;margin:0 auto clamp(44px,5vw,64px);text-align:center}
  .head.left{margin-left:0;text-align:left}
  .head h2{font-size:clamp(2.1rem,4.2vw,3.2rem);font-weight:600;margin:18px 0 16px}
  .head p{font-size:1.12rem;color:var(--ink-soft)}

  /* BENTO */
  .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:18px}
  .tile{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform .3s,box-shadow .3s}
  .tile:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
  .tile.img{background:linear-gradient(160deg,var(--blue),var(--blue-700))}
  .tile.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
  .tile.img:hover img{transform:scale(1.07)}
  .tile.img .cap{position:absolute;inset:auto 0 0 0;padding:22px;background:linear-gradient(transparent,rgba(22,62,104,.62) 70%);color:#fff;text-shadow:0 1px 8px rgba(10,30,55,.35)}
  /* Drei Groessen fuer das ganze Raster, nicht sechs. Gemessen am 06.09.2026:
     die Titel standen auf 20,8 / 18,4 / 16,8 und die Beitexte auf 13,8 / 14,1
     / 14,7 Pixel. Unterschiede, die zu klein sind um Absicht zu wirken, und zu
     gross um zu verschwinden. Genau das sieht man als "nicht gleichmaessig".
       --kachel-zahl   die grosse Ziffer
       --kachel-titel  jede Ueberschrift und das Zitat
       --kachel-text   jeder Beitext, egal auf welchem Grund */
  .bento{--kachel-zahl:clamp(2.2rem,3.2vw,2.9rem);--kachel-titel:1.2rem;--kachel-text:.94rem}

  .tile.img .cap h3{color:#fff;font-size:var(--kachel-titel);line-height:1.22;margin-bottom:5px}
  /* War opacity:.85 auf weissem Text. Eine gesetzte Farbe ist berechenbarer,
     der Verlauf darunter ist ohnehin dunkel genug. */
  .tile.img .cap span{font-size:var(--kachel-text);line-height:1.45;color:rgba(255,255,255,.88)}
  .tile.pad-t{padding:26px;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
  /* Zahlenkacheln: Ziffer und Beschriftung gehoeren zusammen und sitzen unten.
     Mit space-between rissen sie auf 190 Pixel Hoehe rund 66 Pixel auseinander,
     die Kachel wirkte in der Mitte leer. Jetzt stehen alle vier Textkacheln
     einer Reihe auf derselben Linie. */
  .tile.pad-t:has(.big){justify-content:flex-end;gap:0}
  .tile.brand{background:var(--grad);color:#fff}
  .tile.brand *{color:#fff}
  /* Jost laeuft von 400 bis 700. 800 war eine Angabe ohne Deckung, der Browser
     hat auf 700 zurueckgestellt (font-synthesis:none verbietet das Faelschen).
     Jetzt steht da, was auch herauskommt. */
  .tile .big{font-family:var(--schrift-display);font-weight:700;font-size:var(--kachel-zahl);line-height:1;letter-spacing:-.03em;display:block}
  .tile .big .stern{font-size:.6em;vertical-align:.18em;margin-left:.06em;letter-spacing:0}
  .tile .lbl{font-size:var(--kachel-text);line-height:1.45;color:var(--muted);margin-top:8px;display:block}
  .tile.brand .lbl{color:rgba(255,255,255,.9)}
  .tile .ic{width:46px;height:46px;border-radius:12px;background:var(--surface-2);color:var(--blue);display:grid;place-items:center}
  .tile .ic svg{width:24px;height:24px}
  .tile h3{font-size:var(--kachel-titel);line-height:1.22;margin-bottom:6px}
  .tile p{font-size:var(--kachel-text);line-height:1.5;color:var(--muted)}
  .tile.quote{background:var(--navy);color:#fff}
  .tile.quote p{font-family:var(--schrift-display);font-weight:500;font-size:var(--kachel-titel);line-height:1.32;color:#fff;font-style:italic}
  .tile.quote .qa{font-size:var(--kachel-text);line-height:1.45;color:#bcd8f5;margin-top:auto;font-style:normal;font-weight:600}
  .t-w2{grid-column:span 2} .t-h2{grid-row:span 2} .t-w2h2{grid-column:span 2;grid-row:span 2}

  /* DUAL PATH */
  .paths{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .pcard{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;padding:38px;color:#fff;transition:transform .35s}
  .pcard:hover{transform:translateY(-6px)}
  .pcard .bgimg{position:absolute;inset:0;z-index:-2}
  .pcard .bgimg img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
  .pcard:hover .bgimg img{transform:scale(1.06)}
  .pcard .ov{position:absolute;inset:0;z-index:-1}
  .pcard.talent .ov{background:linear-gradient(158deg,#1e70bb,#0d3a63)}
  .pcard.org .ov{background:linear-gradient(158deg,#d84400,#7a2600)}
  .pcard .tag{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);padding:6px 13px;border-radius:var(--r-full);width:fit-content;margin-bottom:16px}
  .pcard h3{color:#fff;font-size:1.9rem;font-weight:500;margin-bottom:12px}
  .pcard>p{color:rgba(255,255,255,.9);font-size:1.02rem;margin-bottom:22px;max-width:42ch}
  .plist{list-style:none;margin-bottom:28px;display:grid;gap:11px}
  .plist li{display:flex;align-items:flex-start;gap:11px;font-size:.98rem;font-weight:500}
  .plist svg{width:20px;height:20px;flex-shrink:0;margin-top:2px;color:#fff}
  .pcard .row{display:flex;gap:12px;flex-wrap:wrap}

  /* SERVICES */
  /* Sechserraster statt Dreierraster, jede Karte spannt zwei Spalten. Damit
     laesst sich eine angebrochene Reihe fuellen, statt sie mittig stehen zu
     lassen: bei fuenf Karten werden die letzten zwei je anderthalb Spalten
     breit, bei sieben nimmt die letzte die ganze Zeile. Vorher standen die
     Waisen zentriert und die Reihe war sichtbar halb leer. */
  .svcs{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
  .svcs>*{grid-column:span 2}
  /* Fuenf gleich grosse Schwerpunkte in einem Dreierraster. Die letzte Reihe
     wird um eine halbe Spalte plus halbe Luecke verschoben, damit sie mittig
     unter den oberen drei sitzt statt links zu haengen. Verschoben wird per
     transform, die Karten behalten also ihre Breite. */
  /* Nicht per transform verschieben: .stagger.in setzt transform:none und wuerde
     das wieder wegnehmen. Deshalb margin-left plus feste Breite. */
  .svcs-fuenf>:nth-child(4),.svcs-fuenf>:nth-child(5){grid-column:span 3}
  /* Sieben Karten im Dreierraster: die siebente steht allein in der letzten
     Reihe und rueckt um eine ganze Spalte nach rechts, damit sie mittig sitzt. */
  .svcs-sieben>:nth-child(7){grid-column:span 6}
  /* Acht Karten (seit 18.10.2026 Bereiche und Wissen): 3 + 3 + 2, die letzten
     beiden je halbe Breite, damit keine Reihe halb leer steht. */
  .svcs-acht>:nth-child(7),.svcs-acht>:nth-child(8){grid-column:span 3}
  /* .svcs-sechs braucht keine Korrektur, 6 = zwei volle Reihen. */

  .svc{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:32px;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s;z-index:0}
  /* .svc::before liegt in der Effektschicht am Dateiende, dort ist aus dem
     Vollflaechen-Verlauf ein Lichtfleck am Zeiger geworden. */
  .svc::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--grad);transition:width .4s}
  .svc:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:transparent}
  .svc:hover::after{width:100%}
  .svc .ic{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;margin-bottom:20px;background:var(--surface-2);color:var(--blue);transition:transform .3s}
  .svc:nth-child(even) .ic{color:var(--orange);background:rgba(235,75,0,.1)}
  .svc:hover .ic{transform:scale(1.08) rotate(-4deg)}
  .svc .ic svg{width:27px;height:27px}
  /* Auf den Uebersichtsseiten sind die Karten die Gliederungsebene direkt
     unter der H1, dort tragen sie h2. In den Anhaengen unter einer H2
     tragen sie h3. Gleiches Aussehen, richtige Gliederung. */
  .svc h2,.svc h3{font-size:1.28rem;margin-bottom:10px}
  .svc p{color:var(--muted);font-size:.98rem}
  .svc .tl{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:.85rem;font-weight:600;color:var(--blue)}
  /* War var(--orange): 3.79:1 auf Weiss, zu wenig fuer 13,6px. Der Wechsel
     zwischen Blau und Orange sah bei fuenf und sieben Karten ausserdem
     zufaellig aus. Der Link-Hinweis ist jetzt ueberall gleich. */
  .svc .tl{color:var(--blue)}
  .svc.cta-card{background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:center;gap:14px}
  .svc.cta-card::before{display:none}
  .svc.cta-card h3{color:#fff}
  .svc.cta-card p{color:rgba(255,255,255,.82)}
  .svc.cta-card .btn{align-self:flex-start}

  /* STATS */
  .statband{background:var(--navy);border-radius:var(--r-lg);padding:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative;overflow:hidden}
  .statband::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% -10%,rgba(235,75,0,.32),transparent 52%),radial-gradient(circle at -5% 110%,rgba(30,112,187,.5),transparent 50%)}
  .stat{position:relative;text-align:center;color:#fff}
  .stat .num{display:block;font-family:var(--schrift-display);font-weight:500;font-size:clamp(2.4rem,4.4vw,3.4rem);line-height:1;letter-spacing:-.03em;background:linear-gradient(120deg,#fff,#a9d3f5);-webkit-background-clip:text;background-clip:text;color:transparent}
  .stat .cap{display:block;margin-top:12px;font-size:.94rem;color:rgba(255,255,255,.78)}

  /* ABOUT */
  .about{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,5vw,68px);align-items:center}
  /* 19.10.2026: Portraet kleiner (Emre), neues Foto Karin-3.jpg. Auf der
     Startseite sitzt das Zitat darunter, auf Ueber uns steht das Bild allein. */
  .aphoto{position:relative;max-width:360px;width:100%;justify-self:center}
  .aphoto>img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--sh-2)}
  .aphoto .frame{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1;background:linear-gradient(160deg,var(--blue),var(--teal));box-shadow:var(--sh-3)}
  .aphoto .frame img{width:100%;height:100%;object-fit:cover}
  /* 19.10.2026: Zitat unter dem Portraet ohne Glaskarte und ohne KH-Kreis (Emre:
     "sieht nicht schoen aus"). Ein schlichter Block mit orangem Strich links,
     darunter Name und Funktion untereinander. */
  .aphoto .qc{margin:22px 4px 28px;padding:2px 0 2px 18px;border-left:3px solid var(--akzent)}
  .aphoto .qc p{font-family:var(--schrift-display);font-weight:500;font-style:italic;font-size:.98rem;line-height:1.5;margin-bottom:12px;color:var(--ink-soft)}
  .aphoto .who{display:block}
  .aphoto .nm{display:block;font-weight:700;font-size:.95rem;font-family:var(--schrift-text);color:var(--ink)}
  .aphoto .rl{display:block;font-size:.84rem;color:var(--muted);margin-top:2px}
  .vals{list-style:none;margin-top:30px;display:grid;gap:18px}
  .vals li{display:flex;gap:16px;align-items:flex-start}
  .vals .vi{width:48px;height:48px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;background:var(--surface-2);color:var(--blue)}
  .vals li:nth-child(2) .vi{color:var(--orange);background:rgba(235,75,0,.1)}
  .vals .vi svg{width:23px;height:23px}
  .vals h3,.vals h4{font-family:var(--schrift-display);font-weight:600;font-size:1.08rem;margin-bottom:3px}
  .vals p{color:var(--muted);font-size:.97rem}

  /* GALLERY */
  .gallery{-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);overflow:hidden}
  .gtrack{display:flex;gap:18px;width:max-content;animation:scroll-x 44s linear infinite}
  .gallery:hover .gtrack{animation-play-state:paused}
  .gitem{width:min(360px,72vw);aspect-ratio:16/11;border-radius:var(--r-md);overflow:hidden;background:linear-gradient(160deg,var(--blue),var(--blue-700));box-shadow:var(--sh-1);flex-shrink:0;position:relative}
  .gitem img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
  .gitem:hover img{transform:scale(1.06)}

  /* PROCESS */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
  .step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:28px 24px;transition:transform .3s,box-shadow .3s}
  .step:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
  .step .num{width:50px;height:50px;border-radius:14px;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--schrift-display);font-weight:500;font-size:1.3rem;margin-bottom:18px;box-shadow:0 8px 18px rgba(30,112,187,.25)}
  .step h3,.step h4{font-family:var(--schrift-display);font-weight:600;font-size:1.14rem;margin-bottom:8px}
  .step p{color:var(--muted);font-size:.96rem}

  /* TESTI */
  .testi{max-width:900px;margin:0 auto;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(40px,5vw,68px);box-shadow:var(--sh-1);position:relative;overflow:hidden}
  .testi::before{content:"";position:absolute;top:-40px;right:-20px;width:220px;height:220px;background:radial-gradient(circle,rgba(235,75,0,.12),transparent 70%)}
  .testi .st{color:#c77b0a;letter-spacing:5px;font-size:1.1rem;margin-bottom:22px;position:relative}
  .testi blockquote{font-family:var(--schrift-display);font-weight:500;font-size:clamp(1.4rem,2.6vw,2.05rem);line-height:1.32;letter-spacing:-.02em;margin-bottom:26px;position:relative}
  .testi cite{font-style:normal;font-weight:600}
  .testi cite span{display:block;font-weight:500;color:var(--muted);font-size:.92rem;margin-top:4px}

  /* CERTS */
  .certs{display:flex;gap:clamp(32px,7vw,80px);flex-wrap:wrap;justify-content:center;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 40px;box-shadow:var(--sh-1);max-width:720px;margin:0 auto}
  .cert-badge{width:auto;object-fit:contain}
  .cert-badge.square{height:108px}
  .cert-badge.wide{height:70px;max-width:280px}
  @media (max-width:520px){.cert-badge.square{height:90px}.cert-badge.wide{height:56px}}

  /* PRESS */
  .press{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .pa{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:transform .3s,box-shadow .3s}
  .pa:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
  .pa .thumb{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(160deg,var(--blue),var(--blue-700))}
  .pa .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
  .pa:hover .thumb img{transform:scale(1.07)}
  .pa .body{padding:24px;display:flex;flex-direction:column;flex-grow:1}
  .pa .meta{font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
  .pa h3{font-size:1.18rem;margin-bottom:8px;line-height:1.2}
  .pa p{font-size:.95rem;color:var(--muted);margin-bottom:16px}
  .pa .more{margin-top:auto;font-weight:600;font-size:.9rem;color:var(--blue);display:inline-flex;align-items:center;gap:6px}

  /* CTA */
  .cta{position:relative;border-radius:var(--r-lg);overflow:hidden;padding:clamp(44px,6vw,80px);text-align:center;color:#fff;background:var(--navy)}
  .cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(30,112,187,.6),transparent 55%),radial-gradient(circle at 85% 100%,rgba(235,75,0,.5),transparent 55%)}
  .cta>*{position:relative}
  .cta h2{color:#fff;font-size:clamp(2rem,4.2vw,3.2rem);font-weight:500;margin-bottom:16px}
  .cta p{color:rgba(255,255,255,.86);font-size:1.15rem;max-width:54ch;margin:0 auto 32px}
  .cta .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

  /* CONTACT */
  .contact{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
  .cinfo{display:grid;gap:14px}
  .ci{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;transition:transform .2s,border-color .2s}
  .ci:hover{transform:translateX(4px);border-color:var(--blue)}
  .ci .ic{width:48px;height:48px;border-radius:13px;background:var(--surface-2);color:var(--blue);display:grid;place-items:center;flex-shrink:0}
  .ci .ic svg{width:23px;height:23px}
  .ci .k{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin-bottom:3px}
  /* Rufnummer und Mailadresse sind auf dem Handy die wichtigsten Tippziele
     und massen 25 Pixel. Jetzt 44. */
  .ci .v a{display:inline-flex;align-items:center;min-height:44px}
  .kontaktliste a{min-height:44px}
  .ci .v{font-weight:600;font-size:1.02rem}
  .ci .v a:hover{color:var(--blue)}
  .mapc{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);min-height:360px;height:100%}
  .mapc iframe{width:100%;height:100%;min-height:360px;border:0;filter:grayscale(.15)}

  /* FOOTER */
  footer{background:var(--navy);color:rgba(255,255,255,.72);padding:66px 0 30px;margin-top:var(--sp)}
  /* Vier Spalten fuer fuenf Kinder: Portal ist bisher unter die Marke gerutscht.
     Jetzt eine Spalte je Liste. */
  .fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:34px;margin-bottom:46px}
  .footer-logo{height:46px;width:auto;filter:brightness(0) invert(1);margin-bottom:18px}
  .fbrand p{font-size:.95rem;max-width:32ch;margin-bottom:18px}
  .socials{display:flex;gap:10px}
  .socials a{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#fff;transition:background .2s,transform .2s,border-color .2s}
  .socials a:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-3px)}
  .socials svg{width:19px;height:19px}
  .fcol .fcol-titel{display:block;color:#fff;font-family:var(--schrift-display);font-weight:600;font-size:.95rem;margin-bottom:16px}
  .fcol a{display:flex;align-items:center;min-height:44px;padding:4px 0;font-size:.94rem;color:rgba(255,255,255,.66);transition:color .15s,padding-left .15s}
  .fcol a:hover{color:#fff;padding-left:4px}
  .fbot{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.87rem}
  .fbot .legal{display:flex;gap:22px;flex-wrap:wrap}
  /* Die drei Rechtslinks massen 23 Pixel Hoehe. */
  .fbot .legal a{display:inline-flex;align-items:center;min-height:44px}
  .fbot a:hover{color:#fff}

  /* Mobile menu */
  .mm{position:fixed;inset:0;z-index:300;background:var(--bg);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:24px}
  .mm.open{transform:none}
  .mm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}
  .mm-close{width:48px;height:48px;border:1.5px solid var(--line);background:none;border-radius:14px;cursor:pointer;color:var(--ink)}
  .mm-close svg{width:24px;height:24px;margin:auto}
  .mm a.ml{font-family:var(--schrift-display);font-weight:600;font-size:1.7rem;padding:15px 0;border-bottom:1px solid var(--line)}
  .mm .mc{margin-top:auto;display:grid;gap:12px}
  .mm .mc .btn{width:100%}

  /* Reveal */
  /* Notausgang, angelegt 06.09.2026. Der Startzustand ist opacity:0, sichtbar
     macht erst das Skript. Loest der Beobachter nicht aus, bleibt der Inhalt
     dauerhaft weg und es steht eine leere Flaeche da. Genau das ist bei der
     Schwesterseite passiert. Nach vier Sekunden erscheint alles von selbst,
     kommt .in vorher, gewinnt es (hoehere Spezifitaet, animation:none). */
  @keyframes notausgang{to{opacity:1;transform:none}}
  .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
    animation:notausgang .01s linear 4s forwards}
  .reveal.in{opacity:1;transform:none;animation:none}
  .stagger>*{opacity:0;transform:translateY(26px);transition:opacity .6s,transform .6s;
    animation:notausgang .01s linear 4s forwards}
  .stagger.in>*{opacity:1;transform:none;animation:none}
  .stagger.in>*:nth-child(1){transition-delay:.05s}
  .stagger.in>*:nth-child(2){transition-delay:.13s}
  .stagger.in>*:nth-child(3){transition-delay:.21s}
  .stagger.in>*:nth-child(4){transition-delay:.29s}
  .stagger.in>*:nth-child(5){transition-delay:.37s}
  .stagger.in>*:nth-child(6){transition-delay:.45s}
  .stagger.in>*:nth-child(7){transition-delay:.53s}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
    .reveal,.stagger>*{opacity:1;transform:none}
    html{scroll-behavior:auto}
  }

  /* Responsive */
  @media (max-width:1000px){
    .hero-grid{grid-template-columns:1fr;gap:44px}
    .hv{max-width:520px;margin:0 auto;width:100%;height:min(520px,88vw)}
    .about{grid-template-columns:1fr;gap:44px}
    .aphoto{max-width:380px;margin:0 auto;width:100%}
    .bento{grid-template-columns:repeat(2,1fr)}
    .t-w2,.t-w2h2{grid-column:span 2}
    /* Zwei Karten je Reihe. Bei fuenf bleibt sonst die letzte allein links
       stehen, deshalb nimmt sie hier die ganze Zeile, wie die siebte auch. */
    .svcs{grid-template-columns:repeat(4,1fr)}
    .svcs-fuenf>:nth-child(4){grid-column:span 2}
    .svcs-fuenf>:nth-child(5),.svcs-sieben>:nth-child(7){grid-column:span 4}
    .svcs-acht>:nth-child(7),.svcs-acht>:nth-child(8){grid-column:span 2}
    .statband{grid-template-columns:repeat(2,1fr)}
    .steps{grid-template-columns:repeat(2,1fr)}
    .contact{grid-template-columns:1fr}
    .fgrid{grid-template-columns:1fr 1fr}
    .press{grid-template-columns:1fr}
  }
  @media (max-width:760px){
    .nav-links,.nav-cta{display:none}
    .burger{display:grid}
    .paths{grid-template-columns:1fr}
  }
  @media (max-width:560px){
    body{font-size:16px}
    .bento{grid-template-columns:1fr;grid-auto-rows:170px}
    .t-w2,.t-w2h2,.t-h2{grid-column:span 1;grid-row:span 1}
    .t-w2h2{grid-row:span 1}
    .statband{grid-template-columns:1fr 1fr;gap:24px}
    .svcs{grid-template-columns:1fr}
    .svcs>*,.svcs-fuenf>:nth-child(4),.svcs-fuenf>:nth-child(5),
    .svcs-sieben>:nth-child(7),.svcs-acht>:nth-child(7),.svcs-acht>:nth-child(8){grid-column:span 1}
    .fgrid{grid-template-columns:1fr}
    .press{grid-template-columns:1fr}
  }

/* =====================================================================
   Mehrseitiger Ausbau: Navigation mit Klappmenues und die Bausteine der
   Unterseiten. Alles nutzt die Variablen von oben, keine neuen Farben.
   ===================================================================== */

/* Klappmenue in der Kopfzeile */
.nav-klapp{position:relative}
.nav-klapp>a{display:inline-flex;align-items:center;gap:5px}
.nav-klapp>a svg{width:14px;height:14px;transition:transform .2s}
.nav-klapp:hover>a svg{transform:rotate(180deg)}
.nav-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:270px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-2);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;
}
.nav-klapp:hover .nav-menu,.nav-klapp:focus-within .nav-menu{opacity:1;visibility:visible;transform:none}
.nav-menu a{display:block;padding:9px 12px;border-radius:10px;font-size:.93rem;font-weight:500}
.nav-menu a::after{display:none}
.nav-menu a:hover{background:var(--surface-2);color:var(--blue)}
.nav-links a.ist-hier{color:var(--blue)}
.mm-nav{display:flex;flex-direction:column;overflow-y:auto}
.mm a.ml.ml-sub{font-family:var(--schrift-text);font-size:1rem;font-weight:500;padding:11px 0 11px 18px;color:var(--muted);border-bottom:none}

/* Held der Unterseiten */
/* ----------------------------------------------------- Lesen (Wissensseiten)
   Sechs gleich aussehende Kaesten untereinander geben keine Orientierung.
   Links laeuft deshalb eine Sprungliste mit, die den aktuellen Abschnitt
   hervorhebt, rechts stehen die nummerierten Abschnitte. */
.lesen{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.lesen-nav{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px}
.lesen-titel{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.lesen-nav a{display:flex;gap:10px;align-items:baseline;padding:12px;min-height:44px;border-radius:10px;
  font-size:.92rem;line-height:1.35;color:var(--muted);border-left:2px solid transparent;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease),
             border-color var(--dur) var(--ease)}
.lesen-nav a .nr{font-size:.78rem;font-weight:700;color:var(--blue);flex:0 0 auto}
.lesen-nav a:hover{color:var(--ink);background:var(--surface-2)}
.lesen-nav a.hier{color:var(--ink);font-weight:600;border-left-color:var(--blue);background:var(--surface-2)}
.lesen-nav a.hier .nr{color:var(--blue)}
.lesen-text .tblock{position:relative;padding-top:clamp(28px,3.4vw,40px)}
.tblock-nr{position:absolute;top:clamp(28px,3.4vw,40px);right:clamp(24px,3.4vw,38px);
  font-family:var(--schrift-display);font-size:2.4rem;line-height:1;color:var(--linie);
  font-weight:500;pointer-events:none;user-select:none}
.lesen-text .tblock h2{max-width:22ch}
.lesen-text .tblock p{max-width:68ch}
/* Variante ohne Sprungliste (06.10.2026): links nur ein Kopf, rechts Fragen,
   Pressetext oder ein einzelner Abschnitt. Ersetzt die 820px schmale
   Mittelspalte (.schmal), die neben den 1280px breiten Nachbarn eingerueckt
   wirkte. Gleiche Spalten wie oben, damit alle Kanten fluchten. */
.lesen-kopf{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.lesen-kopf h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.lesen-kopf .lesen-titel{margin-bottom:0}
.lesen-text > :last-child{margin-bottom:0}
.lesen-text .faq p{max-width:68ch}
/* AGB: Unterpunkte a) bis f) */
.agb-abc{list-style:lower-alpha;padding-left:1.5rem;display:grid;gap:.4rem;margin:0 0 14px;
  color:var(--ink-soft);max-width:68ch}
.agb-abc li::marker{color:var(--blue)}
@media (max-width:960px){
  .lesen{grid-template-columns:1fr;gap:24px}
  /* Auf schmalen Schirmen wird die Sprungliste zu einer waagrechten Leiste. */
  .lesen-nav{position:static;flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px;
    scrollbar-width:none}
  .lesen-nav::-webkit-scrollbar{display:none}
  .lesen-titel{display:none}
  .lesen-kopf{position:static}
  .lesen--kopf .lesen-titel{display:block}
  .lesen-nav a{flex:0 0 auto;border-left:0;border-bottom:2px solid transparent;
    background:var(--surface-2);white-space:nowrap;max-width:52vw;overflow:hidden;
    text-overflow:ellipsis;display:block}
  .lesen-nav a.hier{border-bottom-color:var(--blue)}
  .tblock-nr{font-size:1.8rem}
}

/* ---------------------------------------------------------- Seitenkopf
   Bis 06.09.2026 auf allen 27 Unterseiten dieselbe blasse Flaeche mit mittigem
   Text. Jetzt mit Verlaufskoerpern wie im Hero und optionalem Bild. Die
   sichtbaren Brotkrumen sind am 08.09.2026 wieder raus (Emre), sie stehen nur
   noch in den strukturierten Daten.
   Die Masse stehen hier, damit die erzeugten Bilder dazu passen und nicht
   umgekehrt. */
.seitenheld{padding:clamp(40px,6vw,72px) 0 clamp(40px,5vw,64px);position:relative;overflow:clip;background:linear-gradient(180deg,var(--surface-2),var(--bg))}
.seitenheld h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:600;letter-spacing:-.018em;margin:18px 0 18px;max-width:20ch}
.seitenheld p{font-size:1.13rem;color:var(--ink-soft);max-width:62ch;line-height:1.55}
.seitenheld .orb{opacity:.34}
.seitenheld .orb.o1{width:420px;height:420px;top:-190px;right:-90px}
.seitenheld .orb.o2{width:320px;height:320px;top:60px;left:-160px}

/* Mit Bild wird der Kopf zweispaltig und linksbuendig. */
.seitenheld.mit-bild .wrap{max-width:var(--wrap);text-align:left;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center}
.seitenheld.mit-bild h1,.seitenheld.mit-bild p{margin-left:0;margin-right:0}
.held-bild{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-2);
  aspect-ratio:4/3;background:var(--flaeche-3)}
.held-bild img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  transition:transform 1.4s var(--ease)}
.seitenheld.mit-bild:hover .held-bild img{transform:scale(1.06)}
/* Der Kopf faellt beim Laden ruhig ein, statt einfach dazustehen. */
.held-text>*{animation:kopf-ein .7s var(--ease) both}
.held-text>*:nth-child(2){animation-delay:.06s}
.held-text>*:nth-child(3){animation-delay:.12s}
.held-text>*:nth-child(4){animation-delay:.18s}
.held-bild{animation:kopf-bild .9s var(--ease) both;animation-delay:.1s}
@keyframes kopf-ein{from{opacity:0;transform:translateY(14px)}}
@keyframes kopf-bild{from{opacity:0;transform:translateY(22px) scale(.97)}}
@media (prefers-reduced-motion:reduce){
  .held-text>*,.held-bild{animation:none}
}
@media (max-width:860px){
  .seitenheld.mit-bild .wrap{grid-template-columns:1fr}
  /* Kein order:-1 mehr: Brotkrume, Titel und Lead sollen zuerst kommen,
     das Bild danach. Sonst steht die H1 unter der Falz. */
  .held-bild{aspect-ratio:16/10;margin-top:24px}
}
.held-aktionen{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}

/* Textspalte */
.tblock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(24px,3.4vw,38px);box-shadow:var(--sh-1);margin-bottom:20px}
.tblock h2{font-size:clamp(1.35rem,2.6vw,1.8rem);margin-bottom:14px}
.tblock p{color:var(--ink-soft);margin-bottom:14px;max-width:72ch}
.tblock p:last-child{margin-bottom:0}
/* Fundstellen im Fliesstext. Global gilt a{color:inherit;text-decoration:none},
   ein Link im Absatz waere sonst nicht als Link zu erkennen. */
.tblock p a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(30,112,187,.4)}
.tblock p a:hover{text-decoration-color:currentColor}
.tblock .hinweis{background:rgba(235,75,0,.08);border-left:3px solid var(--orange);padding:14px 18px;border-radius:0 10px 10px 0;color:var(--ink)}
.zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px}
.zwei .tblock{margin-bottom:0;display:flex;flex-direction:column;align-items:flex-start}

/* Nummerierte Schritte */
.schritte{list-style:none;counter-reset:s;display:grid;gap:16px}
.schritte li{counter-increment:s;position:relative;padding-left:52px;color:var(--ink-soft)}
.schritte li::before{
  content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;
  background:var(--blue);color:#fff;font-family:var(--schrift-display);font-weight:700;font-size:.95rem;
  display:grid;place-items:center;
}
.schritte b{color:var(--ink)}

/* Chips */
.chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.chips-titel{font-size:.82rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);padding:8px 16px;font-size:.9rem;color:var(--ink-soft)}
.beruf-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.beruf-chip{
  display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-full);padding:13px 22px;font-weight:600;font-size:.97rem;box-shadow:var(--sh-1);
  transition:transform .2s,border-color .2s,color .2s;
}
.beruf-chip svg{width:15px;height:15px;color:var(--orange);transition:transform .2s}
.beruf-chip:hover{transform:translateY(-3px);border-color:var(--blue);color:var(--blue)}
.beruf-chip:hover svg{transform:translateX(3px)}

/* Fragen */
.faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:11px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--schrift-display);font-size:1.4rem;color:var(--blue);line-height:1;flex-shrink:0}
.faq[open] summary::after{content:"–"}
.faq p{padding:0 22px 20px;color:var(--ink-soft)}

/* Weiterlesen-Link */
/* min-height 44: die Tippflaeche mass 36 Pixel. */
.mehr{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--blue);margin-top:6px}
.mehr svg{width:15px;height:15px;transition:transform .2s}
.mehr:hover svg{transform:translateX(4px)}

/* Schlussruf */
.schluss{background:linear-gradient(135deg,var(--blue-700),var(--blue));color:#fff;border-radius:var(--r-lg);padding:clamp(34px,5vw,62px);text-align:center;box-shadow:var(--sh-2)}
.schluss h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:14px}
.schluss p{color:rgba(255,255,255,.92);max-width:56ch;margin:0 auto}
.schluss-aktionen{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.schluss-aktionen .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)}
.schluss-aktionen .btn-ghost:hover{background:rgba(255,255,255,.2);color:#fff;border-color:#fff}

/* Kontakt */
.kontaktliste{display:grid;gap:12px}
.kontaktliste a,.kontaktliste div{display:block;background:var(--surface-2);border-radius:var(--r-sm);padding:15px 18px}
.kontaktliste span{display:block;font-size:.76rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.kontaktliste b{font-size:1.02rem;font-weight:600;color:var(--ink)}
.kontaktliste a:hover b{color:var(--blue)}
.karte{margin-top:22px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-1)}
.karte iframe{display:block;width:100%;height:340px;border:0}

/* Karten als Links */
a.svc{text-decoration:none}
a.svc:hover h2,a.svc:hover h3{color:var(--blue)}

@media (max-width:1000px){.nav-menu{display:none}}

/* Die Navigation hat seit dem mehrseitigen Ausbau sechs Punkte statt fuenf und
   dazu laengere Beschriftungen. Sie braucht deshalb frueher das Burger-Menue,
   sonst schiebt sie das Logo zusammen. */
.brand,.brand-logo{flex-shrink:0}
.nav-cta{flex-shrink:0}
.nav-links a{white-space:nowrap}
/* Die Kopfzeile sitzt in .wrap und hat damit hoechstens 1220 Pixel, egal wie breit
   der Bildschirm ist. Die kompakten Masse gelten deshalb immer und nicht erst ab
   einer Schwelle, sonst laeuft die Zeile auf grossen Schirmen ueber. */
.nav-links a{padding:10px 8px;font-size:.92rem}
/* Hoehere Spezifitaet als .nav-links a, sonst greift das alte Innenmass. */
.nav-links .nav-punkt{padding:11px 11px;font-size:.95rem}
.nav-cta{gap:6px}
.nav-cta .btn{padding:11px 17px;font-size:.9rem}
/* Rechnung: .wrap ist hoechstens 1220 breit und hat 24 Pixel Innenabstand je
   Seite, es bleiben also 1172 fuer Logo, Menue und Handlungsknopf, abzueglich
   zweier Abstaende. Sechs Menuepunkte, das Logo mit Signet und zwei Knoepfe
   passen da nicht hinein. Anmelden faellt deshalb aus der Kopfzeile, es steht
   weiterhin im Mobilmenue, in der Fussleiste unter Portal und auf /kontakt/. */
.nav{gap:16px}
.nav-cta .btn-ghost{display:none}
/* Neu gemessen nach dem Kopfzeilen-Umbau (06.09.2026, abends): Logo 263,
   Menue 640, Knopf 174, dazu zwei Abstaende von 16, macht 1109. Vorher waren
   es 1156 bei 1172 verfuegbaren, also 16 Pixel Luft. Jetzt sind es 123.
   Damit darf das Burger-Menue wieder spaeter greifen: bei 1200 Pixeln
   Fensterbreite bleiben 1137 nutzbar, das sind 28 Pixel Reserve. Notebooks mit
   1280 behalten also die volle Zeile. */
@media (max-width:1199px){
  .nav-links,.nav-cta{display:none}
  .burger{display:grid}
}

/* Der Seitenkopf der Unterseiten steht mittig, wie die Abschnittskoepfe auf der
   Startseite. Sonst springt der Text zwischen Held und Inhalt hin und her. */
.seitenheld .wrap{max-width:900px;text-align:center}
.seitenheld h1{margin-left:auto;margin-right:auto}
.seitenheld p{margin-left:auto;margin-right:auto}
.held-aktionen{justify-content:center}

  /* Die Zeilenlisten. Standen bis zum 08.09.2026 in den drei Achsen
     (wen, wo, wie). Die Achsen sind weg: seit die mobile Pflege ein Bereich
     ist, waren "wen" und die Bereichskarten dieselbe Liste, und "wie" eine
     Liste mit einem Eintrag. Die Zeilen selbst blieben, sie tragen jetzt die
     Einsatzorte auf der Startseite. Zeilen statt Pillen, mit Haarlinie
     dazwischen. */
  .az-liste{display:flex;flex-direction:column;margin-top:12px;
            border-top:1px solid var(--linie-zart)}
  .az-zeile{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:52px;padding:8px 0;border-bottom:1px solid var(--linie-zart);
    font-size:.97rem;color:var(--ink);line-height:1.3;
  }
  .az-zeile:last-child{border-bottom:0}
  .az-zeile>span{flex:1}
  .az-zeile svg{width:17px;height:17px;color:var(--blue);flex:0 0 auto;
    opacity:0;transform:translateX(-6px);
    transition:opacity .22s var(--ease),transform .22s var(--ease)}
  a.az-zeile:hover{color:var(--blue)}
  a.az-zeile:hover svg{opacity:1;transform:none}
  /* Die Einsatzbereiche sind keine Verweise. Der erklaerende Satz stand vorher
     nur im title-Attribut, das auf dem Handy niemand zu sehen bekommt. */
  .az-zeile--still{flex-direction:column;align-items:flex-start;gap:2px;
                   color:var(--ink);cursor:default}
  .az-zeile--still em{font-style:normal;font-size:.86rem;color:var(--muted);
                      line-height:1.4}


/* ============================================================================
   EFFEKTSCHICHT                                             angelegt 06.09.2026
   Emre: "überall Effekte, unglaublich modern und hochwertig."

   Regeln, die ich mir dafür gesetzt habe:
   - Nichts, was den Text schwerer lesbar macht. Die Seite verkauft an
     Pflegedirektionen, nicht an eine Kreativjury.
   - Bewegung nur, wo sie etwas erklärt: Tiefe, Zusammenhang, Fortschritt.
   - Alles Neue liegt hinter prefers-reduced-motion. Wer die Systemeinstellung
     gesetzt hat, bekommt die ruhige Seite von vorher.
   - Scrollgetriebenes läuft über animation-timeline, also nativ und ohne
     Rechenlast im Haupt-Thread. Wo der Browser das nicht kann, passiert
     schlicht nichts, statt dass etwas kaputt aussieht.
   ============================================================================ */

/* Seitenuebergang, Bilder am Scrollen, Abschnittskoepfe, Glanz am Knopf,
   Koernung, gestapelte Schatten und der Feinschliff stehen seit 06.09.2026
   in _Kern/effekte.css und gelten fuer alle vier Marken. Hier bleibt nur,
   was an den Klassennamen dieser Marke haengt. */

/* ---------------------------------------------------------- 4 Licht am Zeiger
   Karten bekommen einen weichen Lichtfleck, der dem Zeiger folgt. Das ist der
   Effekt, den teure Software-Oberflächen benutzen, weil er Materialität
   erzeugt, ohne den Inhalt anzufassen. Die Position kommt aus zwei Variablen,
   die das Skript setzt. */
.svc,.tblock,.fam{position:relative;isolation:isolate}
.svc::before,.tblock::before,.fam::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  z-index:-1;opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
    rgba(30,112,187,.10),transparent 60%);
}
.svc:hover::before,.tblock:hover::before,.fam:hover::before{opacity:1}
/* Der Verlauf auf .svc::before ersetzt den alten Vollflächen-Verlauf, der beim
   Zeigen die ganze Karte eingefärbt hätte. */

/* ----------------------------------------------------- 5 Rand aus Licht
   Statt die Randfarbe zu wechseln, wandert ein heller Verlauf über die Kante.
   Zwei Hintergründe, einer beschnitten auf den Rahmen. */
.svc,.tblock{
  border:1px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
             linear-gradient(150deg,var(--linie),var(--linie)) border-box;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .45s var(--ease);
}
.svc:hover,.tblock:hover{
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
             linear-gradient(150deg,var(--marke) 0%,var(--teal) 45%,var(--akzent) 100%) border-box;
}
/* Die dunkle CTA-Karte behaelt ihre Fuellung, sie hat keinen hellen Rand. */
.svc.cta-card,.svc.cta-card:hover{background:var(--navy);border-color:transparent}
.svc.cta-card::before{display:none}

/* -------------------------------------------------- 7 Überschrift wortweise
   Die Wörter steigen nacheinander ein. Bewusst ohne Maske: Jost hat
   Unterlängen, eine Maske würde das g und das p beschneiden. Die Verzögerung
   setzt das Skript als Variable je Wort. */
@media (prefers-reduced-motion:no-preference){
  /* Der unsichtbare Anfangszustand steht bewusst NUR im Keyframe, nicht als
     eigene Regel. Sonst bleibt die Überschrift unsichtbar, wenn Animationen
     nicht laufen: im Hintergrund-Tab friert der Browser sie ein, und genau so
     ist es mir hier aufgefallen. Mit fill-mode both übernimmt der Keyframe den
     Anfangszustand während der Verzögerung, und wo gar nichts animiert wird,
     steht der Text einfach da. */
  .wortweise .w{display:inline-block;
    animation:wort-auf .62s cubic-bezier(.2,.7,.3,1) both;
    animation-delay:calc(var(--i) * 42ms + 60ms)}
  @keyframes wort-auf{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
}

/* -------------------------------------------------- 9 Kopfzeile beim Scrollen
   Sie schrumpft, verdichtet das Glas und bekommt eine Haarlinie. Der Übergang
   ist lang genug, dass man ihn nicht als Sprung wahrnimmt. */
#header{transition:padding .35s var(--ease),background .35s var(--ease),
  box-shadow .35s var(--ease),backdrop-filter .35s var(--ease)}
#header.scrolled{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 1px 0 rgba(5,43,89,.08),0 12px 32px rgba(5,43,89,.06);
}

/* Wer die Systemeinstellung gesetzt hat, bekommt die ruhige Fassung. */
@media (prefers-reduced-motion:reduce){
  .held-bild img,.tile.img img,.gitem img,.aphoto .frame img,.pa .thumb img,.head{animation:none}
  .wortweise .w{opacity:1;transform:none;animation:none}
  .btn-cta::after{display:none}
}

/* ============================================================================
   KOPFZEILE                                             umgebaut am 06.09.2026
   Vorher: sieben Punkte, 1156 von 1172 Pixeln belegt, sechzehn Pixel Luft, und
   unter 1234 Pixel Fensterbreite fiel alles ins Burger-Menue. Die zwei
   inhaltsreichsten Punkte steckten in schmalen Klapplisten.

   Jetzt sechs Punkte, ein breites Panel dahinter, eine gleitende Markierung
   und beim Scrollen verdichtet sich die Zeile zu einer schwebenden Pille.
   ============================================================================ */

/* ------------------------------------------------------- Gleitende Markierung
   Ein Feld, das weich zwischen den Punkten wandert, statt dass jeder Punkt
   seinen eigenen Hintergrund ein- und ausblendet. Das Skript setzt Breite und
   Position, hier steht nur, wie es sich bewegt. */
.nav-links{position:relative}
.nav-gleiter{
  position:absolute;left:0;top:50%;height:38px;width:0;margin-top:-19px;
  border-radius:var(--r-full);background:var(--surface-2);
  opacity:0;pointer-events:none;z-index:0;
  transition:transform .34s var(--ease-pop),width .34s var(--ease-pop),opacity .2s var(--ease);
}
.nav-links.gleitet .nav-gleiter{opacity:1}
.nav-halt{position:relative;z-index:1}
.nav-punkt{
  display:inline-flex;align-items:center;gap:5px;
  padding:10px 14px;border-radius:var(--r-full);
  font-weight:500;font-size:.97rem;white-space:nowrap;
  transition:color .18s var(--ease);
}
.nav-punkt svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.nav-punkt:hover,.nav-punkt.ist-hier{color:var(--blue)}
.nav-halt.offen .nav-punkt{color:var(--blue)}
.nav-halt.offen .nav-punkt svg{transform:rotate(180deg)}
/* Der aktive Punkt behaelt seine Unterscheidung, auch wenn der Gleiter woanders steht. */
.nav-punkt.ist-hier::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  border-radius:2px;background:var(--grad);
}

/* ------------------------------------------------------------------ Panel */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--surface);
  border-top:1px solid var(--linie-zart);
  box-shadow:0 24px 48px rgb(var(--schatten-ton) / .12),0 2px 0 rgb(var(--schatten-ton) / .04);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  /* visibility ist ein Schaltwert. Ohne eigene Verzoegerung in der Kette
     springt sie erst am Ende um, das Panel waere 260ms unsichtbar und
     wuerde dann auftauchen. Beim Oeffnen sofort, beim Schliessen spaeter. */
  transition:opacity .26s var(--ease),transform .3s var(--ease),visibility 0s linear .26s;
  z-index:2;
}
.mega.offen{opacity:1;visibility:visible;transform:none;
  transition:opacity .26s var(--ease),transform .3s var(--ease),visibility 0s}
.mega-inhalt{
  max-width:var(--wrap);margin:0 auto;padding:30px 24px 34px;
  display:grid;grid-template-columns:1fr 1.35fr .85fr;gap:clamp(24px,3vw,48px);
}
#mega-wissen .mega-inhalt{grid-template-columns:1.9fr .85fr}
/* Seit 08.09.2026 stehen links die fuenf Bereiche und rechts der eine Weg,
   auf dem besetzt wird. Die breite Spalte gehoert deshalb nach vorne. */
#mega-angebot .mega-inhalt{grid-template-columns:1.35fr 1fr .85fr}
.mp-titel{
  display:block;font-size:.74rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
.mp-zeile{display:flex;gap:12px;align-items:flex-start;padding:9px 10px;border-radius:12px;
  transition:background .18s var(--ease)}
.mp-zeile:hover{background:var(--surface-2)}
.mp-zeile .ic{width:38px;height:38px;border-radius:11px;margin-bottom:0;flex:0 0 auto}
.mp-zeile .ic svg{width:19px;height:19px}
.mp-zeile b{display:block;font-family:var(--schrift-display);font-weight:600;
  font-size:.98rem;color:var(--ink);line-height:1.25}
.mp-zeile em{display:block;font-style:normal;font-size:.85rem;color:var(--muted);
  margin-top:2px;line-height:1.4}
.mp-zeile:hover b{color:var(--blue)}
.mp-raster{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mp-zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mp-kurz{display:block;padding:9px 10px;border-radius:10px;font-size:.93rem;
  color:var(--ink-soft);transition:background .18s var(--ease),color .18s var(--ease)}
.mp-kurz:hover{background:var(--surface-2);color:var(--blue)}
.mp-mehr{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;padding:0 10px;
  font-size:.9rem;font-weight:600;color:var(--blue)}
.mp-mehr::after{content:"→";margin-left:7px;transition:transform .22s var(--ease)}
.mp-mehr:hover::after{transform:translateX(4px)}

/* Der Hinweis rechts: eine Karte mit Bild, die den Blick fängt. */
.mp-hinweis{
  position:relative;border-radius:var(--r-md);overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-end;min-height:190px;background:var(--flaeche-3);
}
.mp-hinweis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;transition:transform .8s var(--ease)}
.mp-hinweis::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(5,43,89,.88) 0%,rgba(5,43,89,.55) 45%,rgba(5,43,89,.15) 100%)}
.mp-hinweis:hover img{transform:scale(1.06)}
.mp-hinweis-text{padding:18px 20px;color:#fff}
.mp-hinweis-text b{display:block;font-family:var(--schrift-display);font-weight:600;font-size:1.1rem}
.mp-hinweis-text em{display:block;font-style:normal;font-size:.86rem;line-height:1.45;
  color:rgba(255,255,255,.92);margin-top:5px}

/* Schleier hinter dem Panel, damit der Blick vorne bleibt. */
.mega-schleier{
  position:fixed;inset:0;z-index:99;background:rgb(var(--schatten-ton) / .28);
  opacity:0;transition:opacity .26s var(--ease);
}
.mega-schleier.offen{opacity:1}

/* ------------------------------------------- Sprungmarke
   Bis 07.09.2026 haing der Sprunglink an style="left:-9999px" plus onfocus und
   onblur im Markup. Das lief, aber zwei Inline-Handler fuer etwas, das :focus
   von selbst kann, und bei strenger CSP faellt es aus. Gleiche Fassung wie
   bei Curawel. */
.skip{
  position:absolute;left:12px;top:-4rem;z-index:300;
  background:var(--blue);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-sm);
  text-decoration:none;font-weight:700;transition:top .18s var(--ease);
}
.skip:focus{top:12px;color:#fff}

/* ------------------------------------------- Pille beim Scrollen
   Ab 140 Pixel Scrollweg zieht sich die Zeile zu einer schwebenden Pille
   zusammen. Die Kopfzeile selbst bleibt volle Breite, damit das Panel weiter
   an ihr hängt und nichts springt. */
#header .wrap.nav{
  transition:max-width .45s var(--ease),padding .45s var(--ease),
             background .45s var(--ease),box-shadow .45s var(--ease),
             border-radius .45s var(--ease),margin .45s var(--ease);
  border-radius:0;
}
#header.pille{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#header.pille .wrap.nav{
  max-width:min(1220px,calc(100vw - 32px));
  margin-top:10px;margin-bottom:10px;
  padding-left:18px;padding-right:18px;
  height:64px;
  border-radius:var(--r-full);
  /* .78 am 07.09.2026 auf .94 gezogen. Bei .78 nahm die Pille die Farbe der
     Sektion an, ueber der sie gerade stand: ueber dem Kennzahlenband grau-blau,
     ueber den zwei Wegen links blau und rechts orange, gleichzeitig. Das Glas
     bleibt, es traegt jetzt nur nicht mehr die halbe Seite mit. */
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 1px 0 rgb(var(--schatten-ton) / .05),
             0 10px 30px rgb(var(--schatten-ton) / .10),
             inset 0 0 0 1px rgba(255,255,255,.55);
}
#header.pille .brand-cwg{opacity:0;width:0;margin-left:-22px;transition:opacity .3s,width .3s,margin .3s}
#header.pille .mega{top:calc(100% - 6px)}
/* Ist ein Panel offen, bleibt die Zeile breit. Sonst wandert der Rand des
   Panels unter der Pille hervor und es sieht nach zwei Ebenen aus. */
#header.pille.hat-offen .wrap.nav{max-width:var(--wrap);border-radius:0;
  margin-top:0;margin-bottom:0;height:78px;box-shadow:none;
  background:rgba(255,255,255,.92)}

/* Abschnittsname auf langen Wissensseiten, sobald die Überschrift weg ist. */
.kopf-abschnitt{
  display:none;align-items:center;gap:9px;font-size:.9rem;color:var(--muted);
  /* 32ch waren mehr, als die Pille je hergibt. Gemessen am 08.09.2026 blieben
     dem Namen auf /wissen/15-prozent-grenze/ 98 Pixel, zu sehen war
     "Die 15-Proz". Jetzt 20ch, und unter 1280 Pixeln gar nicht, weil die
     Pille dort nur 1104 Pixel innen hat und Marke, Menue und Knopf davon
     schon 987 brauchen. Die Orientierung uebernimmt dann die Sprungliste
     links, die ohnehin mitlaeuft. */
  max-width:20ch;min-width:0;flex:0 1 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.kopf-abschnitt b{color:var(--ink);font-weight:600}
.kopf-abschnitt::before{content:"";width:1px;height:20px;background:var(--linie);flex:0 0 auto}
#header.zeigt-abschnitt .kopf-abschnitt{display:flex}
/* Unter 1280 Pixeln bleibt er weg, dort reicht die Breite der Pille nicht. */
@media (max-width:1279px){#header.zeigt-abschnitt .kopf-abschnitt{display:none}}

@media (max-width:1199px){
  .mega,.mega-schleier,.nav-gleiter{display:none}
  #header.pille .wrap.nav{max-width:min(680px,calc(100vw - 24px))}
}
@media (prefers-reduced-motion:reduce){
  .nav-gleiter,.mega,#header .wrap.nav,.mp-hinweis img{transition:none}
}

/* ----------------------------------------------------------------- Wegweiser
   Angelegt 06.09.2026. Die Pflegegruppe zeigt seit heute nur noch ihre vier
   Schwerpunkte. Wer etwas anderes sucht, lief damit ins Leere. Der Wegweiser
   faengt das auf und macht aus dem Verlust ein Argument: die Gruppe hat mehr,
   die Marke ist spezialisiert. */
.wegweiser{
  background:linear-gradient(160deg,var(--flaeche-2),var(--flaeche-3));
  border:1px solid var(--linie-zart);border-radius:var(--r-l);
  padding:clamp(28px,3.6vw,44px);
}
.ww-kopf{max-width:62ch}
.ww-signet{height:22px;width:auto;margin-bottom:16px;opacity:.9}
.ww-kopf h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:10px}
.ww-kopf p{color:var(--ink-soft);font-size:1.02rem;line-height:1.55}
.ww-liste{display:grid;gap:10px;margin-top:26px}
.ww-zeile{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:6px clamp(16px,2.4vw,34px);
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-m);
  padding:18px 22px;min-height:44px;
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.ww-zeile:hover{border-color:var(--marke-mittel);transform:translateY(-2px);box-shadow:var(--sh-1)}
.ww-frage{font-family:var(--schrift-display);font-weight:600;font-size:1.05rem;
  color:var(--ink);line-height:1.3}
.ww-marke{display:inline-flex;align-items:center;gap:7px;grid-row:span 2;
  font-weight:600;font-size:.95rem;color:var(--blue);white-space:nowrap}
.ww-marke svg{width:16px;height:16px;transition:transform .22s var(--ease)}
.ww-zeile:hover .ww-marke svg{transform:translateX(4px)}
.ww-was{font-size:.92rem;color:var(--muted);line-height:1.45;grid-column:1}
.ww-rest{margin-top:22px;font-size:.98rem;line-height:1.6;color:var(--ink-soft);max-width:76ch}
.ww-rest a{color:var(--blue);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(30,112,187,.4)}
.ww-rest a:hover{text-decoration-color:currentColor}
@media (max-width:640px){
  .ww-zeile{grid-template-columns:1fr}
  .ww-marke{grid-row:auto;margin-top:4px}
}

/* ============================================================================
   HANDYLEISTE                                            angelegt 07.09.2026
   Auf dem Handy stand bis heute kein einziger fester Handlungsknopf. Wer nach
   dem Held weiterlas, hatte bis zum Fuss keine Gelegenheit mehr, ohne
   Zurueckscrollen anzufragen oder sich zu bewerben. Curawel hat das schon,
   hier ist dieselbe Leiste mit den zwei Wegen der Pflegegruppe.

   Sie erscheint erst ab 600 Pixel Scrollweg. Direkt im Held waere sie doppelt,
   dort stehen die Knoepfe ohnehin.

   Der Fuss bekommt unten Platz, sonst legt sich die Leiste ueber die letzte
   Zeile. env(safe-area-inset-bottom) fuer iPhones mit Streifen. */
.handyleiste{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;gap:8px;align-items:center;
  padding:9px 16px calc(9px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -18px rgba(5,43,89,.7);
  transform:translateY(110%);
  transition:transform .3s var(--ease);
}
.handyleiste.da{transform:none}
.handyleiste .btn{flex:1;min-height:48px;padding-inline:10px;font-size:.88rem;white-space:nowrap}
.handyleiste .btn-tel{flex:none;width:48px;padding:0}
.handyleiste .btn-tel svg{width:20px;height:20px}
@media (min-width:1200px){.handyleiste{display:none}}
@media (max-width:1199px){body{padding-bottom:74px}}
/* Ohne Skript bleibt die Leiste stehen, wo sie ist: unsichtbar unter dem Rand.
   Deshalb faehrt sie hier heraus, sobald jemand Bewegung abbestellt hat. */
@media (prefers-reduced-motion:reduce){
  .handyleiste{transition:none}
}

/* ---------------------------------------------------- Ruhe auf kleinen Geraeten
   Acht Endlosanimationen liefen bisher auf jedem Geraet: drei Lichtflecken im
   Held, zwei schwebende Karten, das Einschubbild und die zwei Laufbaender. Auf
   einem Handy sind die Lichtflecken hinter dem Bild ohnehin kaum zu sehen, das
   Compositing laeuft aber weiter und kostet Akku. Ab hier stehen sie still. */
@media (max-width:900px){
  /* Die Spezifitaet muss die der Originalregeln erreichen: die Lichtflecken
     sind als .orb.o1 gesetzt, die Karten als .hv-card.c1. Ein blosses .orb
     verliert gegen beide und die Animation lief weiter. */
  .orb.o1,.orb.o2,.orb.o3,
  .hv-card.c1,.hv-card.c2,.hv-inset{animation:none;will-change:auto}
}

/* ----------------------------------------------------------------- Baender
   Angelegt 07.09.2026. Die Seite ist auf dem Rechner knapp dreizehntausend
   Pixel lang und stand vom Held bis zum Fuss auf derselben Flaeche. Alle
   sechzehn Sektionen waren durchsichtig, die einzige Ausnahme war ein Verlauf
   bei "Drei Fragen". Beim Durchscrollen liess sich dadurch keine Kapitelgrenze
   erkennen, ohne die Ueberschriften zu lesen.

   Drei Baender setzen jetzt ab, ungefaehr gleichmaessig verteilt: die drei
   Fragen, das Kennzahlenband und die vier Marken. Kein Verlauf mehr, sondern
   eine ruhige Flaeche mit Haarlinie. Ein Verlauf, der ins Nichts ausblendet,
   hat keine Unterkante, und genau die braucht es hier.

   Das Band traegt sein Polster selbst (.pad), die Nachbarn halten mit .pad-o
   beziehungsweise .pad denselben Abstand zur Kante. So steht ueberall --sp. */
section.band{
  background:var(--flaeche-2);
  border-top:1px solid var(--linie-zart);
  border-bottom:1px solid var(--linie-zart);
}