/* OMU - Blog fuer Onlinemarketing-Unternehmen
   Handgeschrieben, kein Geruest, keine Bibliothek.

   Aufbau, Typografie und Knopfformen folgen seo-experte.de als Vorlage:
   Source Sans, sehr grosse Ueberschriften mit enger Zeilenhoehe, ein Wort
   je Ueberschrift in der Markenfarbe, Knoepfe mit 10 Pixel Radius in
   Dunkel oder Tuerkis, Huelle 1180 Pixel, organische Formen hinter den
   Bildern, weiche Wellenkanten zwischen den Abschnitten.

   Die Schrift liegt auf unserem eigenen Server. Google Fonts direkt
   einzubinden hiesse, jedem Besucher eine Verbindung zu einem Dritten
   aufzuzwingen - auf einer Seite, die ueber Sorgfalt schreibt, geht das
   nicht. */

@font-face{
  font-family:"Source Sans 3";
  src:url("/schrift/source-sans-3.woff2") format("woff2");
  font-weight:200 900; 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:"Source Sans 3";
  src:url("/schrift/source-sans-3-ext.woff2") format("woff2");
  font-weight:200 900; 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{
  --marke:#00af9c;          /* Sellwerk */
  --marke-tief:#00847d;
  --marke-dunkel:#0b5f5a;
  --marke-hell:#9fd0cc;
  --marke-blass:#e6f5f3;
  --akzent:#f5b400;
  --dunkel:#16292a;         /* Text und dunkle Knoepfe */
  --dunkel-2:#3f5456;
  --grau:#69727d;
  --grau-hell:#eaeaea;
  --grund:#ffffff;
  --grund-2:#f4f8f8;
  --linie:#e2e9e9;
  --schatten:0 1px 2px rgba(22,41,42,.05), 0 10px 30px rgba(22,41,42,.06);
  --schatten-tief:0 20px 50px rgba(22,41,42,.10);
  --sans:"Source Sans 3","Source Sans Pro","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --breit:1180px;
  --schmal:46rem;
  --rund:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--grund);color:var(--dunkel);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--marke-tief);text-decoration:none}
a:hover{color:var(--marke)}
/* Nur Links im Fliesstext werden unterstrichen - also die in Absaetzen,
   Aufzaehlungen und Tabellenzellen. Der erste Versuch lief andersherum, ueber
   eine Kette von :not(). Das ging schief, weil :not() die Spezifitaet seiner
   Argumente mitbringt: Die Regel gewann gegen jede Bauteilregel, und die
   Verzeichnislinks standen unterstrichen da. */
main p a,main li a,main td a{text-decoration:underline;text-underline-offset:.15em}
main .inhalt li a,main .karte p a,main .fragen summary a{text-decoration:none}
main .inhalt li a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--marke);outline-offset:3px}

/* ---------- Typografie ----------
   Grosse Ueberschriften mit Zeilenhoehe 1,05 - das ist der Griff, der die
   Vorlage stark aussehen laesst. Ein Wort darin traegt die Markenfarbe. */
h1,h2,h3,h4{margin:0 0 .5em;font-weight:700;line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.4rem,5vw,3.75rem)}
h2{font-size:clamp(1.9rem,3.8vw,3.125rem);margin-top:0}
h3{font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.25;letter-spacing:-.01em}
h4{font-size:1.05rem}
.mark{color:var(--marke-tief)}
p{margin:0 0 1.15em;max-width:40em}
.lede{font-size:1.15rem;color:var(--grau);max-width:34em}
ul,ol{margin:0 0 1.3em;padding-left:1.35em;max-width:40em}
li{margin-bottom:.45em}
strong{font-weight:700}
hr{border:0;border-top:1px solid var(--linie);margin:3rem 0}

.huelle{max-width:var(--breit);margin:0 auto;padding:0 1.5rem;position:relative;z-index:1}
.schmal{max-width:var(--schmal);margin-left:auto;margin-right:auto}
.mitte{text-align:center}
.mitte p{margin-left:auto;margin-right:auto}

/* ---------- Knoepfe ----------
   Zwei Formen wie in der Vorlage: dunkel fuer den Hauptweg, tuerkis fuer
   den zweiten. Der Pfeil sitzt im Knopf und rueckt beim Zeigen. */
.knopf{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--dunkel);color:#fff;
  font:700 1rem/1.2 var(--sans);padding:1.05rem 1.6rem;border-radius:var(--rund);
  border:0;cursor:pointer;text-decoration:none;transition:background .18s,transform .18s;
}
.knopf:hover{background:#000;color:#fff;transform:translateY(-2px)}
.knopf::after{content:"↗";font-size:1.05em;transition:transform .18s}
.knopf:hover::after{transform:translate(2px,-2px)}
.knopf.tuerkis{background:var(--marke)}
.knopf.tuerkis:hover{background:var(--marke-tief)}
.knopf.rand{background:transparent;color:var(--dunkel);box-shadow:inset 0 0 0 2px var(--dunkel)}
.knopf.rand:hover{background:var(--dunkel);color:#fff}
.knopf.hell{background:#fff;color:var(--dunkel)}
.knopf.hell:hover{background:var(--marke-blass);color:var(--dunkel)}
.knopf.ohne::after{content:none}
.knopf.gross{font-size:1.125rem;padding:1.2rem 1.9rem}

/* ---------- Kopfzeile ----------
   Schwebende weisse Leiste mit abgerundeter Unterkante, wie in der Vorlage. */
.kopf{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--linie)}
.kopf .huelle{display:flex;align-items:center;gap:1.6rem;min-height:5rem}
.kopf a.logo{flex:none;line-height:0}
.kopf a.logo img{width:8rem}
.menue{display:flex;gap:1.35rem;margin-left:auto;align-items:center}
.menue a{color:var(--dunkel);font-size:.98rem;font-weight:600;padding:.4rem 0;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.menue a:hover,.menue a[aria-current]{color:var(--marke-tief);border-bottom-color:var(--marke)}
/* Der Knopf im Menue braucht seine eigene Farbe zurueck: ".menue a" ist
   spezifischer als ".knopf" und hat ihm sonst die dunkle Textfarbe auf den
   dunklen Grund gesetzt - der Knopf war leer. */
.menue a.knopf{padding:.85rem 1.25rem;font-size:.95rem;margin-left:.6rem;
  color:#fff;border-bottom:0}
.menue a.knopf:hover{transform:none;color:#fff;border-bottom:0}
/* Klappmenue fuer schmale Bildschirme */
.menue-schalter{display:none;margin-left:auto;background:none;border:0;padding:.5rem;
  cursor:pointer;color:var(--dunkel)}
.menue-schalter svg{width:1.75rem;height:1.75rem;stroke:currentColor;stroke-width:2;fill:none}

/* ---------- Aufmacher ----------
   Weicher Verlauf mit organischen Formen dahinter. Die Formen sind reines
   CSS, kein Bild - das spart einen Abruf und skaliert von allein. */
.aufmacher{position:relative;overflow:hidden;padding:4.5rem 0 5rem;
  background:linear-gradient(160deg,#dfeeec 0%,#eef5f4 45%,var(--grund) 100%)}
.aufmacher::before,.aufmacher::after{content:"";position:absolute;border-radius:46% 54% 58% 42%/48% 44% 56% 52%;
  background:var(--marke-hell);opacity:.42;pointer-events:none}
.aufmacher::before{width:44rem;height:40rem;right:-10rem;top:-8rem}
.aufmacher::after{width:26rem;height:24rem;right:6rem;bottom:-11rem;background:var(--marke-tief);opacity:.13}
.aufmacher .huelle{display:grid;grid-template-columns:1.08fr .92fr;gap:3.5rem;align-items:center}
.aufmacher.einspaltig .huelle{display:block;max-width:52rem}
.aufmacher h1{margin-bottom:.45em}
.augenbraue{display:block;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;letter-spacing:.02em;
  color:var(--marke);text-transform:uppercase;line-height:1;margin-bottom:.35rem}
.marke-zeile{display:inline-flex;align-items:center;gap:.55rem;background:#fff;
  border:1px solid var(--linie);border-radius:99px;padding:.4rem 1rem;font-size:.85rem;
  font-weight:700;color:var(--marke-tief);margin-bottom:1.3rem;box-shadow:var(--schatten)}
.marke-zeile::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--marke)}

/* Zwei mal zwei Merkmale unter dem Aufmachertext, wie in der Vorlage */
.merkmale{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2rem;margin:2rem 0 2.2rem;max-width:34rem}
.merkmal{display:flex;align-items:center;gap:.9rem}
.merkmal .sinnbild{flex:none;width:3rem;height:3rem;border-radius:50%;background:#fff;
  display:grid;place-items:center;box-shadow:var(--schatten);color:var(--marke-tief)}
.merkmal svg{width:1.5rem;height:1.5rem;stroke:currentColor;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.merkmal span{display:block;font-size:.92rem;color:var(--grau);line-height:1.3}
.merkmal b{display:block;font-size:1.05rem;color:var(--dunkel)}

/* Bild im Aufmacher auf organischer Form */
.aufmacher .bildseite{position:relative;display:grid;place-items:center}
.aufmacher .bildseite img{position:relative;z-index:1;max-height:32rem;width:auto;margin-inline:auto}

/* Karte im Aufmacher der Themenseiten: die zwei Gewichte nebeneinander.
   Das ist auf jeder dieser Seiten die eigentliche Aussage - sie gehoert
   nach oben, nicht in einen Absatz weiter unten. */
.gewichtkarte{background:#fff;border:1px solid var(--linie);border-radius:18px;
  padding:2rem;box-shadow:var(--schatten-tief)}
.gewichtkarte .rolle{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grau);font-weight:700;margin:0 0 1.2rem}
.gewichtpaar{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;
  padding-bottom:1.4rem;border-bottom:1px solid var(--linie);margin-bottom:1.3rem}
.gewichtpaar b{display:block;font-size:2.9rem;font-weight:700;line-height:1;
  letter-spacing:-.035em;color:var(--marke-tief);font-variant-numeric:tabular-nums}
.gewichtpaar div:last-child b{color:var(--dunkel)}
.gewichtpaar span{display:block;font-size:.92rem;color:var(--grau);margin-top:.45rem}
.gewichtkarte .warum{font-size:.98rem;color:var(--grau);margin-bottom:1.1rem;max-width:none}
.gewichtkarte .weiter{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;
  font-size:.95rem;color:var(--marke-tief);text-decoration:none}
.gewichtkarte .weiter::after{content:"→";transition:transform .18s}
.gewichtkarte .weiter:hover::after{transform:translateX(3px)}

/* ---------- Abschnitte und Wellenkanten ---------- */
.abschnitt{padding:5rem 0;position:relative}
.abschnitt.grund{background:var(--grund-2)}
.abschnitt.dunkel{background:var(--dunkel);color:#fff}
.abschnitt.dunkel h2,.abschnitt.dunkel h3{color:#fff}
.abschnitt.dunkel p{color:rgba(255,255,255,.72)}
.abschnitt.tuerkis{background:linear-gradient(150deg,var(--marke-tief),var(--marke-dunkel));color:#fff}
.abschnitt.tuerkis h2{color:#fff}
.abschnitt.tuerkis .mark{color:#c9ede6}
.abschnitt.tuerkis p{color:rgba(255,255,255,.8)}
/* Weiche Kante nach oben - der Griff, der die Vorlage zusammenhaelt.
   Zuerst stand hier ein Pseudoelement mit clip-path, das ueber den Abschnitt
   darueber geschoben wurde. Das hinterliess bei farbigen Abschnitten einen
   weissen Spalt, weil "background: inherit" den Verlauf ein zweites Mal
   anlegte statt ihn fortzusetzen. Jetzt woelbt sich der Abschnitt selbst:
   zwei elliptische Ecken, die sich in der Mitte treffen. Kein zweites
   Element, keine Naht. */
.welle{border-top-left-radius:50% 3.5rem;border-top-right-radius:50% 3.5rem;
  padding-top:6.5rem;position:relative}
.kopfzeile{max-width:44rem;margin:0 auto 3rem}
.kopfzeile.links{margin-left:0}
.kopfzeile p{font-size:1.1rem;color:var(--grau)}
.abschnitt.dunkel .kopfzeile p,.abschnitt.tuerkis .kopfzeile p{color:rgba(255,255,255,.75)}

/* ---------- Karten ----------
   Sechseckiges Sinnbild neben dem Titel, Text darunter - Aufbau wie im
   Abschnitt "Unsere SEO-Leistungen" der Vorlage. */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.6rem}
.karte{background:#fff;border:1px solid var(--linie);border-radius:16px;padding:1.9rem;
  display:block;color:inherit;box-shadow:var(--schatten);
  transition:transform .18s,box-shadow .18s,border-color .18s}
a.karte:hover{transform:translateY(-4px);box-shadow:var(--schatten-tief);
  border-color:var(--marke-hell);color:inherit}
.karte .sechseck{width:3.6rem;height:4rem;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--marke),var(--marke-dunkel));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);margin-bottom:1.1rem}
.karte .sechseck svg{width:1.7rem;height:1.7rem;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.karte h3{margin-bottom:.5rem}
.karte p{font-size:.98rem;color:var(--grau);margin-bottom:0;max-width:none}
.karte .mehr{display:inline-flex;align-items:center;gap:.35rem;margin-top:1.1rem;
  font-weight:700;font-size:.95rem;color:var(--marke-tief)}
.karte .mehr::after{content:"→";transition:transform .18s}
a.karte:hover .mehr::after{transform:translateX(3px)}
.karte .gewicht{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.karte .gewicht span{font-size:.78rem;font-weight:700;padding:.25rem .6rem;border-radius:99px;
  background:var(--marke-blass);color:var(--marke-dunkel)}

/* ---------- Zwei Spalten ---------- */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.zwei.schmalrechts{grid-template-columns:1.15fr .85fr}
.zwei img{border-radius:16px}
.blobbild{position:relative;display:grid;place-items:center}
.blobbild::before{content:"";position:absolute;inset:-8% -4%;
  border-radius:46% 54% 58% 42%/48% 44% 56% 52%;
  background:linear-gradient(150deg,var(--marke-hell),var(--marke-tief));opacity:.5}
.blobbild img{position:relative;z-index:1;border-radius:0}

/* ---------- Person ---------- */
.person{display:grid;grid-template-columns:minmax(0,16rem) 1fr;gap:2.8rem;align-items:center}
.person img{width:100%}
.person h2,.person h3{margin-top:0}
.person .rolle{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--marke-tief);font-weight:700;margin:0 0 .4rem}
.person.klein{grid-template-columns:minmax(0,7.5rem) 1fr;gap:1.5rem}
.person.klein p{font-size:.95rem}

/* ---------- Zahlen ---------- */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:2rem;margin:2.5rem 0 0}
.zahl{text-align:center}
.zahl b{display:block;font-size:2.8rem;font-weight:700;color:var(--marke);line-height:1;
  letter-spacing:-.03em;margin-bottom:.5rem}
.abschnitt.dunkel .zahl b,.abschnitt.tuerkis .zahl b{color:var(--marke-hell)}
.zahl span{font-size:.95rem;color:var(--grau)}
.abschnitt.dunkel .zahl span,.abschnitt.tuerkis .zahl span{color:rgba(255,255,255,.7)}

/* ---------- Ablaufschritte ---------- */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:2rem;margin-top:3rem;
  counter-reset:schritt}
.schritt{position:relative;padding-top:3.6rem}
.schritt::before{counter-increment:schritt;content:counter(schritt,decimal-leading-zero);
  position:absolute;top:.35rem;right:0;font-size:3.4rem;font-weight:700;color:#fff;
  line-height:1;letter-spacing:-.04em;opacity:.14;pointer-events:none}
/* Sinnbild statt nackter Zahl vorne - die Zahl bleibt, tritt aber als grosse
   blasse Ziffer nach hinten. */
.schritt .schrittbild{position:absolute;top:0;left:0;width:3.1rem;height:3.1rem;
  border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.16);
  color:#fff}
.schritt .schrittbild svg{width:1.6rem;height:1.6rem;stroke:currentColor;stroke-width:1.7;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.schritt h3{margin-bottom:.4rem}
.schritt p{font-size:.98rem;color:var(--grau);margin-bottom:0;max-width:none}
.abschnitt.dunkel .schritt p,.abschnitt.tuerkis .schritt p{color:rgba(255,255,255,.7)}

/* ---------- Tabellen ---------- */
.tabelle{overflow-x:auto;margin:1.8rem 0;border:1px solid var(--linie);border-radius:14px;background:#fff}
table{border-collapse:collapse;width:100%;font-size:.97rem}
th,td{text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--linie);vertical-align:top}
thead th{background:var(--grund-2);font-weight:700;font-size:.85rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--dunkel-2);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}

/* ---------- Hinweiskasten ---------- */
.hinweis{background:var(--marke-blass);border-left:4px solid var(--marke);
  border-radius:0 12px 12px 0;padding:1.3rem 1.5rem;margin:1.8rem 0}
.hinweis p{margin-bottom:.7em;max-width:none}
.hinweis p:last-child{margin-bottom:0}
.hinweis.gelb{background:#fdf6e0;border-left-color:var(--akzent)}

/* ---------- Aufklappbare Fragen ---------- */
.fragen{max-width:52rem;margin:0 auto;display:grid;gap:.85rem}
.frage{background:#fff;border:1px solid var(--linie);border-radius:14px;overflow:hidden;
  box-shadow:var(--schatten)}
.frage summary{list-style:none;cursor:pointer;padding:1.25rem 1.5rem;font-weight:700;
  font-size:1.05rem;display:flex;align-items:center;gap:1rem;transition:color .15s}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";flex:none;margin-left:auto;width:.7rem;height:.7rem;
  border-right:2.5px solid var(--marke);border-bottom:2.5px solid var(--marke);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.frage[open] summary{color:var(--marke-tief)}
.frage[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.frage .antwort{padding:0 1.5rem 1.4rem}
.frage .antwort p{margin-bottom:.8em;color:var(--grau)}
.frage .antwort p:last-child{margin-bottom:0}

/* ---------- Die zwei Ringe ----------
   Dieselbe Darstellung wie auf Seite 2 des Berichts. Anklickbar: wer auf ein
   Stueck zeigt, sieht, welcher Baustein gemeint ist und was er wiegt. */
.ringe{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.ringkarte{background:#fff;border:1px solid var(--linie);border-radius:18px;padding:2rem;
  box-shadow:var(--schatten)}
.ringkarte .kopf{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:1.4rem;border-bottom:1px solid var(--linie);padding-bottom:.9rem}
.ringkarte .kopf h3{margin:0}
.ringkarte .kopf span{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--grau);font-weight:700}
.ringkarte .ring{width:100%;max-width:16rem;margin:0 auto;display:block}
.ring circle{transition:stroke-width .18s,opacity .18s;cursor:pointer}
.ring circle.matt{opacity:.28}
.ring circle.aktiv{stroke-width:32}
.ring .ctr{font-size:19px;font-weight:700;fill:var(--dunkel);letter-spacing:.02em}
.ring .sub{font-size:8.5px;fill:var(--grau);letter-spacing:.06em}
.ringlegende{margin-top:1.4rem;display:grid;gap:.15rem}
.ringlegende button{display:flex;align-items:center;gap:.7rem;width:100%;background:none;
  border:0;padding:.5rem .55rem;border-radius:8px;cursor:pointer;font:inherit;font-size:.95rem;
  color:var(--dunkel);text-align:left;transition:background .15s}
.ringlegende button:hover,.ringlegende button.aktiv{background:var(--marke-blass)}
.ringlegende i{flex:none;width:.85rem;height:.85rem;border-radius:3px}
.ringlegende .wert{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--dunkel-2)}
.ringlegende .pfeil{flex:none;color:var(--grau);transition:transform .15s}
.ringlegende button:hover .pfeil{transform:translateX(2px);color:var(--marke-tief)}
/* Erklaerkasten unter den Ringen */
.ringinfo{margin-top:1.6rem;background:var(--grund-2);border-radius:14px;padding:1.3rem 1.5rem;
  min-height:8.5rem}
.ringinfo h4{margin:0 0 .4rem;font-size:1.05rem}
.ringinfo p{font-size:.95rem;color:var(--grau);margin:0 0 .9rem;max-width:none}
.ringinfo .knopf{padding:.7rem 1.1rem;font-size:.9rem}

/* ---------- Check-Formular ---------- */
.check{background:#fff;border:1px solid var(--linie);border-radius:18px;padding:2rem;
  box-shadow:var(--schatten-tief)}
.check h2{margin:0 0 .3em;font-size:1.5rem}
.check p.klein{font-size:.95rem;color:var(--grau);margin-bottom:1.3rem;max-width:none}
.check label{display:block;font-size:.85rem;font-weight:700;margin:.9rem 0 .35rem}
.check input[type=text],.check input[type=email]{width:100%;padding:.9rem 1rem;
  border:1px solid var(--linie);border-radius:var(--rund);font:inherit;font-size:1rem;
  background:var(--grund-2);transition:background .15s,border-color .15s}
.check input:focus{background:#fff;border-color:var(--marke)}
.check .zustimmung{display:flex;gap:.65rem;align-items:flex-start;margin:1.2rem 0 .2rem;
  font-size:.83rem;color:var(--grau);line-height:1.5}
.check .zustimmung input{margin-top:.3rem;flex:none;width:1rem;height:1rem;accent-color:var(--marke)}
.check button{width:100%;margin-top:1.2rem;justify-content:center}
.check .lauf{display:none;margin-top:1.3rem}
.check .bahn{height:.55rem;background:var(--grau-hell);border-radius:4px;overflow:hidden}
.check .voll{height:100%;width:5%;background:var(--marke);transition:width .6s ease}
.check .schritt{margin-top:.6rem;font-size:.9rem;color:var(--grau);padding:0}
.check .fehler{display:none;margin-top:1rem;padding:.8rem 1rem;border-radius:var(--rund);
  background:rgba(178,59,50,.09);color:#b23b32;font-size:.9rem}
.check .fertig{display:none;margin-top:1.3rem;padding:1.1rem;border-radius:12px;
  background:var(--marke-blass);font-size:.95rem}

/* ---------- Blogliste ---------- */
.beitraege{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1.6rem}
.beitrag{display:block;background:#fff;border:1px solid var(--linie);border-radius:16px;
  padding:1.7rem;color:inherit;box-shadow:var(--schatten);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.beitrag:hover{transform:translateY(-4px);box-shadow:var(--schatten-tief);
  border-color:var(--marke-hell);color:inherit}
.beitrag .kat{display:inline-block;font-size:.74rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--marke-dunkel);background:var(--marke-blass);
  padding:.25rem .65rem;border-radius:99px;margin-bottom:.9rem}
.beitrag h2{margin:0 0 .5em;font-size:1.18rem;line-height:1.3;letter-spacing:-.01em}
.beitrag p{font-size:.95rem;color:var(--grau);margin-bottom:.9em;max-width:none}
.beitrag time{font-size:.85rem;color:var(--grau)}

/* ---------- Inhaltsverzeichnis ---------- */
.inhalt{background:#fff;border:1px solid var(--linie);border-radius:16px;padding:1.6rem 1.8rem;
  box-shadow:var(--schatten)}
.inhalt h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.07em;color:var(--grau);
  margin:0 0 .9rem}
.inhalt ol{columns:2;column-gap:2.5rem;margin:0;padding-left:1.15rem;font-size:.96rem;max-width:none}
.inhalt li{margin-bottom:.4em;break-inside:avoid}
.inhalt a{text-decoration:none;color:var(--dunkel)}
.inhalt a:hover{color:var(--marke-tief);text-decoration:underline}

/* ---------- Fusszeile ----------
   Hell statt dunkel. Im dunklen Fussbereich musste das Logo in einer weissen
   Fassung stehen, und die verlor die Form der Sprechblase - es sah aus wie
   ein Fleck. Auf hellem Grund steht das richtige Logo in Markenfarbe. */
.fuss{background:var(--grund-2);color:var(--grau);padding:4.5rem 0 2rem;font-size:.95rem;
  border-top:1px solid var(--linie)}
.fuss .huelle{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:3.5rem}
.fuss .fussmarke img{width:9.4rem;margin-bottom:1rem}
.fuss .fussanspruch{font-weight:700;color:var(--dunkel);font-size:1.02rem;margin-bottom:.7rem}
.fuss h4{color:var(--dunkel);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:1rem;font-weight:700}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:.6em}
.fuss a{color:var(--grau)}
.fuss a:hover{color:var(--marke-tief)}
.fuss .knopf{color:#fff;margin-top:.6rem}
.fuss .knopf:hover{color:#fff}
/* Offenlegung: wer schreibt, in welcher Rolle, und was der Blog nicht ist.
   Steht bewusst im Fuss jeder Seite und nicht nur im Impressum. */
.fuss .offenlegung{grid-column:1/-1;margin-top:3rem;padding-top:2rem;
  border-top:1px solid var(--linie);font-size:.86rem;line-height:1.6;max-width:62rem}
.fuss .offenlegung p{max-width:none;margin-bottom:.7em}
.fuss .unten{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.85rem;margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--linie)}

/* ---------- Kurzfassung ueber einem Beitrag ----------
   Wer ueberfliegt, hat in zehn Sekunden das Wesentliche. Und ein KI-System,
   das den Beitrag als Quelle heranzieht, findet die Kernaussage in
   zusammenhaengendem Satzbau statt verstreut ueber zwei Bildschirmseiten. */
.kurzfassung{background:var(--marke-blass);border-radius:14px;padding:1.6rem 1.8rem;
  margin:0 0 2.5rem}
.kurzfassung h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--marke-dunkel);margin:0 0 .9rem;font-weight:700}
.kurzfassung ul{margin:0;padding-left:1.2rem;max-width:none}
.kurzfassung li{margin-bottom:.5em;font-size:.99rem}
.kurzfassung li:last-child{margin-bottom:0}

/* ---------- Quellenblock ---------- */
.quellen{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--linie);
  max-width:62rem;margin-inline:auto}
.quellen h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--grau);margin-bottom:1rem}
.quellen ul{list-style:none;padding:0;margin:0 0 1.2rem;max-width:none;display:grid;gap:.9rem}
.quellen li{font-size:.93rem;color:var(--dunkel-2);margin:0;line-height:1.55}
.quellen li strong{color:var(--dunkel)}
.fussnote{font-size:.83rem;color:var(--grau);line-height:1.6;max-width:none;margin:0}

/* ---------- Beispielbericht ----------
   Nachbau der Seite 2 des Berichts. Wer wissen will, was er bekommt, soll es
   sehen statt es beschrieben zu lesen. */
.berichtkarte{background:#fff;border:1px solid var(--linie);border-radius:18px;
  padding:2.2rem;box-shadow:var(--schatten-tief);max-width:46rem}
.berichtkopf{display:flex;align-items:flex-start;gap:1.2rem;margin-bottom:1.8rem;
  padding-bottom:1.3rem;border-bottom:1px solid var(--linie)}
.berichtkopf h3{margin:0 0 .2rem}
.berichtkopf p{margin:0;font-size:.92rem;color:var(--grau);max-width:none}
.beispielmarke{flex:none;background:var(--akzent);color:var(--dunkel);font-size:.72rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .7rem;
  border-radius:5px;margin-top:.25rem}
.werte{display:grid;gap:1.5rem;margin-bottom:2rem}
.wertkopf{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:.5rem}
.wertkopf span{font-size:.95rem;font-weight:600;color:var(--dunkel-2)}
.wertkopf b{font-size:1.6rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bahn{position:relative;height:.65rem;background:var(--grau-hell);border-radius:4px;
  overflow:hidden}
.bahn .tick{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.8);z-index:1}
.bahn .voll{display:block;height:100%;border-radius:4px}
.skala{display:flex;justify-content:space-between;margin-top:.3rem;font-size:.72rem;
  color:var(--grau);font-variant-numeric:tabular-nums}
.gut{color:#1f8a4c}   .voll.gut{background:#28a35f}
.mittel{color:#b8860b} .voll.mittel{background:var(--akzent)}
.schwach{color:#b23b32} .voll.schwach{background:#d0574c}
.berichtkarte table{font-size:.93rem}
.berichtkarte th,.berichtkarte td{padding:.6rem .7rem}
.berichtkarte .tabelle{border:0;border-radius:0;margin:0 0 1.4rem}
.berichtkarte .num{text-align:right;font-variant-numeric:tabular-nums}
.punkt{display:inline-block;width:.7rem;height:.7rem;border-radius:3px;margin-right:.55rem;
  vertical-align:-1px}
.berichtkarte tbody td:first-child{white-space:nowrap}
.balkenzelle{width:30%;min-width:5.5rem}
.mini{display:block;height:.45rem;background:var(--grau-hell);border-radius:3px;overflow:hidden}
.mini span{display:block;height:100%;border-radius:3px}
.mini.gut span{background:#28a35f}
.mini.mittel span{background:var(--akzent)}
.mini.schwach span{background:#d0574c}

/* ---------- Schmale Bildschirme ---------- */
@media(max-width:60rem){
  .aufmacher .huelle,.zwei,.zwei.schmalrechts,.ringe,.fuss .huelle{grid-template-columns:1fr}
  .aufmacher{padding:3rem 0 3.5rem}
  .aufmacher .bildseite{order:-1}
  .aufmacher .bildseite img{max-height:18rem}
  .aufmacher::before{width:26rem;height:24rem;right:-8rem;top:-6rem}
  .aufmacher::after{display:none}
  .abschnitt{padding:3.5rem 0}
  .person{grid-template-columns:1fr;gap:1.5rem;text-align:center}
  .person img{max-width:14rem;margin:0 auto}
  .person.klein img{max-width:9rem}
  .inhalt ol{columns:1}
  .welle{border-top-left-radius:50% 2rem;border-top-right-radius:50% 2rem;padding-top:4.5rem}
  .kopf .huelle{min-height:4.2rem;gap:1rem}
  .kopf a.logo img{width:6.6rem}
  .menue-schalter{display:block}
  .menue{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:.5rem 1.5rem 1.5rem;margin:0;
    border-bottom:1px solid var(--linie);box-shadow:var(--schatten-tief);display:none}
  .menue.offen{display:flex}
  .menue a{padding:.85rem 0;border-bottom:1px solid var(--linie)}
  .menue .knopf{margin:1rem 0 0;justify-content:center;border-bottom:0}
  .merkmale{grid-template-columns:1fr}
}
@media(max-width:38rem){
  .karte,.beitrag,.ringkarte,.check{padding:1.4rem}
  .zahl b{font-size:2.2rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
@media print{
  .kopf,.check,.fuss,.ringlegende,.inhalt{display:none}
  body{font-size:11pt}
  .aufmacher::before,.aufmacher::after{display:none}
}