/* ============================================================
   Blog — gemeinsames Stylesheet fuer die Uebersicht und die
   Beitragsseiten.

   Sieben Seiten mit demselben Geruest: hier liegt es einmal statt
   siebenmal inline. Die Marken heissen wie auf den anderen einfachen
   Unterseiten (Impressum, Datenschutz), damit man nicht zweimal
   nachdenken muss, welche Farbe gerade gilt.

   WICHTIG beim Aendern: Die Seiten binden diese Datei als
   /blog/blog.css?v=N ein. Wer hier etwas aendert, zaehlt das N in ALLEN
   Beitragsseiten hoch. Sonst sehen wiederkehrende Besucher das neue
   Layout nicht: die Datei traegt keine Version im Namen, und ein Browser,
   der sie schon hat, fragt bis zum Ablauf des Caches nicht nach.
   Aktuell: v=13
   ============================================================ */

@view-transition{navigation:auto}

:root{
  --bg:#F7F3EC; --bg-2:#F1EBE1; --surface:#FFFFFF; --line:#E4DCD0;
  --text:#1C1A17; --text-2:#4E4840; --muted:#6F665C;
  --accent:#14345C; --brand:#14345C; --ice:#9EC1FF; --sand:#EADFCB;
  --disp:"Plus Jakarta Sans",system-ui,sans-serif;
  --body:"Manrope",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.65;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");}
.wrap{max-width:680px;margin:0 auto;padding-inline:24px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:5px}

.nav{display:flex;align-items:center;padding:32px 0}
.brand{display:flex;align-items:center;gap:11px;color:var(--text)}
.brand:hover{text-decoration:none}
/* "wangler.studio" ist reine Kleinschrift: box-zentriert staende das
   Quadrat zu hoch. Hier auf die optische Mitte gesetzt. */
.brand .sq{width:10px;height:10px;border-radius:3px;background:var(--brand);
  transform:translateY(2px)}
.brand .wm{font:700 17px var(--disp);letter-spacing:-.02em}
.brand .wm .dim{color:var(--muted)}

main{padding:28px 0 100px}
.krume{font:600 13.5px var(--body);color:var(--muted);margin-bottom:22px}
.krume a{color:var(--muted)}
.krume span{padding-inline:7px;color:var(--line)}
h1{font:800 clamp(1.9rem,4.4vw,2.6rem) var(--disp);letter-spacing:-.035em;
  text-wrap:balance}
.sub{color:var(--muted);font-size:.95rem;margin-top:10px}
.lead{color:var(--text-2);margin-top:22px;max-width:56ch;text-wrap:pretty}

/* ---------- Uebersicht ---------- */
/* Zweite Fassung: neueste zuerst, und der neueste bekommt Platz. Eine
   Liste aus gleich grossen Kacheln sagt nichts darueber, wo man anfangen
   soll. Jeder Eintrag traegt ausserdem seine Unterzeile, sonst muss man
   den Titel raten. */
.aufmacher{display:block;margin-top:clamp(26px,4vw,38px);
  padding:clamp(24px,3.2vw,36px);border-radius:20px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(28,26,23,.04),0 10px 28px -16px rgba(28,26,23,.14);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.aufmacher:hover{transform:translateY(-3px);text-decoration:none;
  box-shadow:0 2px 4px rgba(28,26,23,.05),0 20px 44px -22px rgba(28,26,23,.2)}
.aufmacher .marke{display:inline-block;padding:4px 10px;border-radius:7px;
  background:var(--ice);color:var(--accent);
  font:800 10.5px var(--body);letter-spacing:.11em}
.aufmacher h2{margin-top:15px;font:800 clamp(1.4rem,3.2vw,1.95rem) var(--disp);
  letter-spacing:-.032em;color:var(--text);text-wrap:pretty}
.aufmacher p{margin-top:9px;font:500 16.4px/1.65 var(--body);color:var(--text-2);
  max-width:52ch;text-wrap:pretty}
.aufmacher .wann{display:block;margin-top:14px;
  font:700 12px var(--body);letter-spacing:.1em;color:var(--muted)}

.weitere{display:grid;grid-template-columns:1fr 1fr;gap:11px;
  margin-top:11px}
.weitere a{display:block;padding:19px 21px;border-radius:15px;
  background:var(--bg-2);color:var(--text);
  transition:background .22s var(--ease),transform .22s var(--ease)}
.weitere a:hover{background:#EBE3D6;transform:translateY(-2px);
  text-decoration:none}
.weitere .wann{font:700 11.5px var(--body);letter-spacing:.1em;color:var(--muted)}
.weitere h3{margin-top:8px;font:800 clamp(1.02rem,2vw,1.16rem) var(--disp);
  letter-spacing:-.026em;text-wrap:pretty}
.weitere p{margin-top:6px;font:500 15px/1.58 var(--body);color:var(--text-2);
  text-wrap:pretty}
@media (max-width:640px){
  .weitere{grid-template-columns:1fr}
}

/* ---------- Beitrag: Fliesstext ---------- */
/* Die Spalte ist durch .wrap begrenzt. Der Text bekommt trotzdem eine
   eigene Grenze in ch: 68 Zeichen sind die Breite, ab der das Auge beim
   Zeilenwechsel anfaengt zu suchen.

   Wichtig: Alle Regeln hier gelten nur fuer Absaetze und Listen OHNE
   eigene Klasse. Die Sonderformen (.antwort, .merke, .gebiet, .umzug,
   .schritte-liste, .post ...) bringen ihre eigene Schrift mit, und
   ".artikel p" waere spezifischer als sie und wuerde sie ueberschreiben. */
.datum{font:700 12.5px var(--body);letter-spacing:.09em;color:var(--muted);
  margin-bottom:16px}
.artikel{max-width:68ch}
.artikel h2{font:800 clamp(1.22rem,2.7vw,1.58rem) var(--disp);letter-spacing:-.03em;
  color:var(--text);margin-top:clamp(36px,4.6vw,54px);text-wrap:pretty}
.artikel p:not([class]){margin-top:16px;color:var(--text-2);font-size:17px;
  line-height:1.78;text-wrap:pretty}
.artikel h2 + p:not([class]){margin-top:14px}
.artikel strong{color:var(--text);font-weight:800}
.artikel ul:not([class]){list-style:none;margin-top:18px;display:grid;gap:9px}
.artikel ul:not([class]) li{padding:14px 17px;border-radius:13px;
  background:var(--bg-2);color:var(--text-2);font-size:16px;line-height:1.6;
  text-wrap:pretty}
.artikel ul:not([class]) li strong{color:var(--text)}
/* Links im Fliesstext sollen man sehen, ohne dass es bunt wird: dieselbe
   Farbe wie sonst, aber dauerhaft unterstrichen. Sonst verschwinden sie
   im dunklen Text, gerade auf dem Handy. */
/* Nur Fliesstext und einfache Aufzaehlungen. Das Inhaltsverzeichnis ist
   ein <ol> und bleibt aussen vor, sonst stuenden dort sieben fette,
   unterstrichene Zeilen untereinander. */
.artikel p a,.artikel ul:not([class]) li a{text-decoration:none;font-weight:700}
/* Der Unterstrich kommt erst beim Zeigen. Dauerhaft waeren es bei zwei
   Verweisen pro Absatz schnell Striche ueberall, und der Text liest sich
   wie ein Formular. Farbe und Gewicht reichen, um ihn zu finden. */
.artikel p a:hover,.artikel ul:not([class]) li a:hover{
  text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:3px}
.artikel p a.roh{font-weight:500}
/* Eine Stelle pro Beitrag darf lauter sein als der Rest. */
.merke{margin-top:clamp(30px,4vw,42px);padding-left:clamp(16px,1.8vw,22px);
  border-left:3px solid var(--ice);
  font:600 clamp(1.05rem,2.2vw,1.22rem)/1.6 var(--disp);letter-spacing:-.02em;
  color:var(--text);max-width:34ch;text-wrap:pretty}
.weiterlesen{margin-top:clamp(34px,4.4vw,48px);padding-top:26px;
  border-top:1px solid var(--line)}
.artikel .weiterlesen p{margin-top:0;color:var(--text-2);font-size:16.5px;
  line-height:1.75;text-wrap:pretty}
.artikel .weiterlesen p + p{margin-top:12px}

/* ============================================================
   Breites Beitrags-Layout ("Vergleich")

   Jeder Beitrag soll spaeter das Layout bekommen, das zu seinem Thema
   passt. Deshalb haengt alles hier an .breit statt am Element: ein
   naechster Beitrag bringt seinen eigenen Satz mit und laesst diesen
   unberuehrt.

   Die Textspalte bleibt schmal, obwohl die Seite breit ist. Breiter Text
   liest sich nicht besser, er liest sich schlechter: ab etwa 70 Zeichen
   findet das Auge den Anfang der naechsten Zeile nicht mehr zuverlaessig.
   Die gewonnene Breite geht deshalb nicht in den Satz, sondern daneben.
   ============================================================ */
.wrap.breit{max-width:1120px}
.artikel.breit{max-width:66ch;margin-left:0}

/* Randnotizen sitzen im freien Streifen rechts, auf der Hoehe des
   Absatzes, zu dem sie gehoeren. Float statt Raster: im Raster wuerde
   jede Notiz eine eigene Zeile aufmachen und den Text nach unten
   schieben. */
.notiz{float:right;clear:right;width:250px;
  margin:8px -302px 20px 44px;
  padding:15px 17px;border-radius:14px;background:var(--bg-2);
  font:500 14.2px/1.62 var(--body);color:var(--text-2);text-wrap:pretty}
.notiz b{display:block;font:800 11px var(--body);letter-spacing:.11em;
  color:var(--muted);margin-bottom:8px}
.notiz a{font-weight:700}

/* Inhaltsverzeichnis. Bei sechs Abschnitten ist es kein Schmuck: man
   sieht damit vor dem ersten Absatz, ob der eigene Punkt ueberhaupt
   vorkommt. */
.inhalt{margin-top:clamp(26px,3.4vw,36px);padding:20px 22px;
  border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.inhalt b{display:block;font:800 11px var(--body);letter-spacing:.11em;
  color:var(--muted);margin-bottom:12px}
.inhalt ol{list-style:none;counter-reset:i;display:grid;gap:7px}
.inhalt li{counter-increment:i;display:flex;gap:11px;align-items:baseline;
  font-size:15.4px;line-height:1.5}
.inhalt li::before{content:counter(i,decimal-leading-zero);flex:none;
  font:800 11.5px var(--body);letter-spacing:.06em;color:var(--muted)}

/* Veranschaulichungen. Zwei pro Beitrag, nicht mehr: ein Bild, das nichts
   erklaert, kostet nur Hoehe. */
.figur{margin-top:clamp(26px,3.4vw,36px)}
.figur figcaption{margin-top:14px;font:500 13.6px/1.6 var(--body);
  color:var(--muted);text-wrap:pretty}

/* Die Balkengrafik ist aus HTML gebaut, nicht aus SVG. In einem SVG
   schrumpft die Beschriftung mit der Grafik: auf dem Handy waeren aus
   12 Pixeln noch 6 geworden. So ist es normaler Text, der umbricht,
   sich vergroessern und uebersetzen laesst. */
.balken .reihe + .reihe{margin-top:20px}
.balken .kopf{display:block;font:800 11px var(--body);letter-spacing:.11em;
  color:var(--muted);margin-bottom:9px}
.balken .bar{display:flex;align-items:stretch;gap:7px;min-height:48px}
.balken .bar i{flex:none;width:17%;min-width:62px;border-radius:12px;
  background:var(--accent)}
.balken .bar em{flex:1;display:flex;align-items:center;padding:9px 15px;
  border-radius:12px;background:var(--line);font-style:normal;
  font:500 14.2px/1.45 var(--body);color:var(--text-2);text-wrap:pretty}
.balken .legende{display:flex;flex-wrap:wrap;gap:9px 24px;margin-top:18px;
  font:500 13.4px var(--body);color:var(--muted)}
.balken .legende span{display:inline-flex;align-items:center;gap:9px}
.balken .pt{width:11px;height:11px;border-radius:3px;flex:none}
.balken .pt.voll{background:var(--accent)}
.balken .pt.leer{background:var(--line)}

/* Gegenueberstellung: zwei Felder nebeneinander, gleiches Gewicht. */
.gegen{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin-top:clamp(24px,3vw,32px)}
.gegen > div{padding:18px 20px;border-radius:15px;background:var(--bg-2)}
.gegen b{display:block;font:800 11px var(--body);letter-spacing:.11em;
  color:var(--muted);margin-bottom:9px}
.artikel .gegen p{margin:0;font-size:15.6px;line-height:1.62;color:var(--text-2)}

/* Ein Link auf einen Beitrag, den es noch nicht gibt. Wikipedia faerbt
   solche Links rot; hier bleibt es beim gedaempften Ton der Seite, aber
   gepunktet, damit man vorher sieht, worauf man sich einlaesst. */
.roh{color:var(--muted);text-decoration:underline dotted;
  text-underline-offset:3px}
.roh:hover{color:var(--text-2);text-decoration:underline dotted}

/* Anker an den Abschnitten, damit man auf eine Stelle verlinken kann. */
.artikel h2{scroll-margin-top:24px}

@media (max-width:1040px){
  /* Kein Platz mehr daneben: die Notiz stellt sich in den Text. */
  .notiz{float:none;width:auto;margin:22px 0}
  .artikel.breit{max-width:68ch}
}
@media (max-width:560px){
  .gegen{grid-template-columns:1fr}
  .inhalt{padding:17px 18px}
}

/* ============================================================
   Layout "Fragen" — fuer Beitraege, die eine Reihe von Fragen
   abarbeiten (zuerst: Fester Preis).

   Jeder Abschnitt beginnt mit der Antwort in einem Satz, danach kommt
   die Begruendung. Wer nur die Antworten liest, hat den Beitrag. Das
   ist die Form, in der solche Fragen auch gestellt werden, und der
   Grund, warum dieser Beitrag nicht aussieht wie der erste.
   ============================================================ */
.antwort{margin-top:15px;padding:16px 19px;border-radius:14px;
  background:var(--bg-2);
  font:600 16.6px/1.62 var(--body);color:var(--text);text-wrap:pretty}
.antwort b{display:block;font:800 10.5px var(--body);letter-spacing:.12em;
  color:var(--muted);margin-bottom:8px}

/* Zeilen als Kacheln statt mit Trennlinien: dieselbe Entscheidung wie
   im Abschnitt "Was ich mache" auf der Startseite. */
.tabelle{width:100%;border-collapse:separate;border-spacing:0 9px;
  margin-top:clamp(22px,3vw,30px);font:500 15.6px/1.55 var(--body)}
.tabelle th{text-align:left;padding:0 15px 4px 0;vertical-align:bottom;
  font:800 10.5px var(--body);letter-spacing:.12em;color:var(--muted)}
.tabelle td{padding:14px 15px;background:var(--bg-2);color:var(--text-2);
  vertical-align:top;text-wrap:pretty}
.tabelle td:first-child{border-radius:12px 0 0 12px;
  color:var(--text);font-weight:700;width:34%}
.tabelle td:last-child{border-radius:0 12px 12px 0}
.tabelle .gut{color:var(--accent);font-weight:700}

@media (max-width:640px){
  /* Drei Spalten auf 330 px waeren je 110 px. Stattdessen wird aus jeder
     Zeile eine Karte, und die Spaltenkoepfe wandern vor den Wert. */
  .tabelle,.tabelle tbody,.tabelle tr,.tabelle td{display:block;width:auto}
  .tabelle thead{display:none}
  .tabelle{border-spacing:0}
  .tabelle tr{background:var(--bg-2);border-radius:14px;padding:15px 17px;
    margin-bottom:10px}
  /* :first-child ist spezifischer als .tabelle td und behielte sonst
     seine 34 % Breite. Deshalb hier noch einmal ausdruecklich. */
  .tabelle td,.tabelle td:first-child{background:none;padding:0;
    border-radius:0!important;width:auto}
  .tabelle td + td{margin-top:11px}
  .tabelle td[data-l]::before{content:attr(data-l) ": ";
    font:800 10.5px var(--body);letter-spacing:.12em;color:var(--muted)}
  .tabelle td:first-child{font-size:16.2px}
}

/* ============================================================
   Layout "Kette" — fuer Beitraege ueber Wege und Uebergaben
   (zuerst: Ein Ansprechpartner).

   Wieder aus HTML statt aus SVG, aus demselben Grund wie die
   Balkengrafik: Beschriftung, die mitschrumpft, ist auf dem Handy
   nicht mehr zu lesen. Hier bricht die Kette stattdessen um.
   ============================================================ */
.kette .reihe + .reihe{margin-top:24px}
.kette .kopf{display:block;font:800 11px var(--body);letter-spacing:.11em;
  color:var(--muted);margin-bottom:11px}
.kette .glieder{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:10px 14px}
.kette .glieder li{position:relative;padding:10px 16px;border-radius:12px;
  background:var(--bg-2);font:700 14.8px var(--body);color:var(--text-2);
  white-space:nowrap}
/* Das Bindeglied liegt im Zwischenraum, nicht in der Kachel. */
.kette .glieder li + li::before{content:"";position:absolute;left:-14px;top:50%;
  width:14px;height:2px;background:var(--line);transform:translateY(-50%)}
.kette .glieder li:first-child{background:var(--accent);color:#fff}
.kette .uebergaben{margin-top:11px;font:500 14.4px/1.6 var(--body);
  color:var(--muted);text-wrap:pretty}

/* Stille Post: was gesagt wurde, und was nach drei Uebergaben ankommt.
   Das zweite Feld ist absichtlich blasser als das erste. */
.post{margin-top:clamp(24px,3vw,32px);display:grid;gap:11px}
.post > div{padding:17px 20px;border-radius:15px}
.post > div:first-child{background:var(--bg-2)}
.post > div:last-child{background:var(--surface);border:1px solid var(--line)}
.post b{display:block;font:800 10.5px var(--body);letter-spacing:.12em;
  color:var(--muted);margin-bottom:9px}
.artikel .post p{margin:0;font:500 16.4px/1.62 var(--body);text-wrap:pretty}
.post > div:first-child p{color:var(--text)}
.post > div:last-child p{color:var(--muted)}

/* ============================================================
   Layout "Entscheidung" — fuer Beitraege, an deren Ende eine Wahl
   steht (zuerst: Kein Baukasten).

   Die Haken hier sind etwas anderes als die acht Haken, die von der
   Startseite geflogen sind. Dort waren sie Schmuck vor Aussagen, die
   ohnehin dastanden. Hier kreuzt der Leser selbst an, und die Zahl der
   Haken ist das Ergebnis. Ohne JavaScript bleiben es normale
   Kaestchen, die man anklicken kann, nur ohne mitlaufende Auswertung.
   ============================================================ */
.pruefliste{margin-top:clamp(26px,3.4vw,36px);padding:20px 22px;
  border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.pruefliste > b{display:block;font:800 11px var(--body);letter-spacing:.11em;
  color:var(--muted);margin-bottom:13px}
.pruefliste label{display:flex;gap:13px;align-items:flex-start;
  padding:11px 12px;margin-inline:-12px;border-radius:11px;cursor:pointer;
  font:500 15.8px/1.55 var(--body);color:var(--text-2);text-wrap:pretty;
  transition:background .18s var(--ease)}
.pruefliste label:hover{background:var(--bg-2)}
.pruefliste input{flex:none;width:19px;height:19px;margin-top:1px;
  accent-color:var(--accent);cursor:pointer}
.pruefliste input:checked + span{color:var(--text)}
.ergebnis{margin-top:15px;padding-top:15px;border-top:1px solid var(--line);
  font:700 15.4px/1.55 var(--body);color:var(--accent);text-wrap:pretty}

/* Umzugsliste: was bleibt, was neu muss, was verloren geht. Die Marke
   steht vorne in der Zeile, nicht als Symbol daneben. */
.umzug{list-style:none;margin-top:clamp(24px,3vw,32px);display:grid;gap:10px}
.umzug li{padding:15px 18px;border-radius:14px;background:var(--bg-2);
  font:500 15.8px/1.6 var(--body);color:var(--text-2);text-wrap:pretty}
.umzug b{display:inline-block;margin-right:9px;padding:3px 9px;border-radius:7px;
  font:800 10.5px var(--body);letter-spacing:.09em;vertical-align:1px}
.umzug .bleibt b{background:var(--accent);color:#fff}
.umzug .neu b{background:var(--ice);color:var(--accent)}
.umzug .weg b{background:var(--line);color:var(--muted)}

/* ============================================================
   Layout "Anleitung" — fuer Beitraege, bei denen der Leser selbst
   etwas tun soll (zuerst: Sofort da).

   Zwei Teile: nummerierte Schritte mit grosser Ziffer, und eine Skala,
   die einen Messwert einordnet. Die Skala traegt ihre Bedeutung im
   Text, nicht in der Farbe: wer Farben schlecht unterscheidet, liest
   trotzdem "bis 2,5 Sekunden".
   ============================================================ */
.schritte-liste{list-style:none;counter-reset:s;
  margin-top:clamp(26px,3.4vw,36px);display:grid;gap:11px}
.schritte-liste li{counter-increment:s;display:flex;gap:16px;
  padding:17px 20px;border-radius:15px;background:var(--bg-2);
  font:500 15.9px/1.62 var(--body);color:var(--text-2);text-wrap:pretty}
.schritte-liste li::before{content:counter(s);flex:none;
  font:800 25px var(--disp);line-height:1;letter-spacing:-.03em;
  color:var(--ice);min-width:26px}
.schritte-liste strong{color:var(--text)}

.skala .messwert + .messwert{margin-top:20px}
.skala .kopf{display:block;font:800 11px var(--body);letter-spacing:.09em;
  color:var(--muted);margin-bottom:9px}
.skala .leiste{display:flex;gap:4px;align-items:stretch}
.skala .leiste span{display:flex;align-items:center;justify-content:center;
  padding:11px 8px;border-radius:9px;text-align:center;
  font:700 13.2px/1.3 var(--body);text-wrap:pretty}
.skala .gut{background:var(--accent);color:#fff;flex:26}
.skala .mittel{background:var(--sand);color:var(--text-2);flex:16}
.skala .schlecht{background:var(--line);color:var(--muted);flex:22}
@media (max-width:560px){
  .skala .leiste span{font-size:12.4px;padding:10px 5px}
  .schritte-liste li{gap:13px;padding:15px 17px}
}

/* ============================================================
   Layout "Treffer" — fuer Beitraege ueber Sichtbarkeit
   (zuerst: Waldbronn).

   Nachbau eines lokalen Suchergebnisses, bewusst schematisch und mit
   erfundenem Betrieb. Es soll zeigen, in welcher Reihenfolge die Dinge
   stehen, nicht so tun, als waere es ein Bildschirmfoto.
   ============================================================ */
.treffer{margin-top:clamp(24px,3vw,32px);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:var(--surface)}
.treffer .eingabe{display:flex;align-items:center;gap:11px;
  padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bg-2);
  font:600 15.4px var(--body);color:var(--text-2)}
.treffer .lupe{width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid var(--muted)}
.treffer .karte{padding:17px 18px;border-bottom:1px solid var(--line)}
.treffer .marke{font:800 10.5px var(--body);letter-spacing:.12em;
  color:var(--muted);margin-bottom:10px}
.treffer .name{font:800 17.4px var(--disp);letter-spacing:-.025em;color:var(--text)}
.treffer .zeile{margin-top:5px;font:500 14.6px/1.5 var(--body);color:var(--text-2)}
.treffer .knoepfe{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.treffer .knoepfe span{padding:7px 14px;border-radius:9px;background:var(--accent);
  color:#fff;font:700 13.4px var(--body)}
.treffer .knoepfe span.zweit{background:var(--bg-2);color:var(--accent)}
.treffer .organisch{padding:17px 18px}
.treffer .url{font:500 13.4px var(--body);color:var(--muted)}
.treffer .titel-link{margin-top:4px;font:700 16.4px var(--body);color:var(--accent)}

/* Dienstleistungsgebiet als Marken. Sichtbar endlich, das ist der Punkt. */
.gebiet{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(20px,2.6vw,28px);
  list-style:none}
.gebiet li{padding:8px 14px;border-radius:10px;background:var(--bg-2);
  font:700 14.4px var(--body);color:var(--text-2)}

/* ============================================================
   Layout "Jahr" — fuer Beitraege ueber Aufwand ueber die Zeit
   (zuerst: Kein WordPress).

   Zwoelf Felder, eine Reihe je Variante. Wieder aus HTML, und die
   Bedeutung steht in der Bildunterschrift, nicht allein in der Farbe.
   ============================================================ */
.jahr .zeile + .zeile{margin-top:24px}
.jahr .kopf{display:block;font:800 11px var(--body);letter-spacing:.11em;
  color:var(--muted);margin-bottom:10px}
.jahr .monate{list-style:none;display:grid;grid-template-columns:repeat(12,1fr);
  gap:5px}
.jahr .monate li{aspect-ratio:1;border-radius:8px;background:var(--line);
  display:flex;align-items:center;justify-content:center;
  font:800 11.5px var(--body);color:var(--muted)}
.jahr .monate li.tat{background:var(--accent);color:#fff}
.jahr .fazit{margin-top:12px;font:500 14.4px/1.6 var(--body);color:var(--muted);
  text-wrap:pretty}
@media (max-width:560px){
  /* Zwoelf Felder auf 330 px waeren je 23 px. Dann lieber zwei Reihen. */
  .jahr .monate{grid-template-columns:repeat(6,1fr)}
}

/* ---------- Beitragsseite ---------- */
.kasten{margin-top:clamp(24px,3.4vw,34px);
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 1px 2px rgba(28,26,23,.04),0 8px 24px -14px rgba(28,26,23,.12);
  padding:clamp(24px,3.4vw,32px)}
.kasten strong{display:block;font:800 1.16rem var(--disp);letter-spacing:-.025em;
  color:var(--text);margin-bottom:9px}
.kasten p{color:var(--text-2);text-wrap:pretty}
.kasten p + p{margin-top:12px}
.zurueck{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(22px,3vw,30px);
  font:700 15.5px var(--body);color:var(--accent)}
.zurueck svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.zurueck:hover{text-decoration:none}
.zurueck:hover svg{transform:translateX(-4px)}

footer{border-top:1px solid var(--line)}
.foot{display:flex;align-items:center;gap:20px;padding-block:28px;
  font:500 13.5px var(--body);color:var(--muted)}
.foot-sp{flex:1}
.foot a{color:var(--text-2)}

@media (max-width:700px){
  .foot{gap:10px 18px;padding-block:24px;font-size:12.5px;flex-wrap:wrap}
  .foot-sp{display:none}
  .foot > span:first-child{flex-basis:100%}
}
@media (max-width:560px){
  main{padding:20px 0 72px}
  .eintrag{padding:15px 17px;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ================= Ein Gespraech: Korrekturfahne (ein-gespraech) ================= */
/* ============================================================
   Layout "Korrekturfahne" fuer Beitraege, die zeigen, was der Kunde
   an einem Entwurf tut (zuerst: Ein Gespraech).

   Ein Korrekturabzug statt einer Vorher-nachher-Grafik: Er zeigt nicht
   das Ergebnis, sondern die Arbeit, die beim Kunden liegt. Und die
   besteht aus ein paar Strichen, ein paar Woertern und drei Bemerkungen
   am Rand. Wieder aus HTML statt aus SVG, aus demselben Grund wie die
   Balkengrafik: Beschriftung, die mitschrumpft, ist auf dem Handy nicht
   mehr zu lesen. Hier rutscht der Rand stattdessen unter den Text.

   Streichungen und Ergaenzungen sind echtes <del> und <ins>. Die
   meisten Screenreader sagen die beiden aber nicht an. Deshalb steht in
   jedem ein versteckter Vorsatz ("Gestrichen:", "Ergaenzt:"), und jede
   Randbemerkung sagt versteckt, worauf sie sich bezieht.

   Liegt vorerst in einer eigenen Datei, damit der Entwurf blog.css
   nicht anfasst. Beim Veroeffentlichen kann der Block in blog.css nach
   "Jahr" wandern; dann dort die Version hochzaehlen und den zweiten
   <link> im Beitrag streichen.
   ============================================================ */

/* Eisblau selbst hat auf Weiss nur etwa 1,8 : 1. Fuer Striche, die man
   sehen muss, gibt es hier eine dunklere Stufe im selben Farbton
   (etwa 5 : 1 auf Weiss). Gilt nur in diesem Block, deshalb kein neues
   Token in :root. */
.fahne{--eis-tief:#3F6DB8}

/* Ein Blatt, das auf dem Tisch liegt: dieselbe Flaeche wie der
   Aufmacher in der Uebersicht, mit etwas weniger Schatten. */
.fahne .blatt{border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:var(--surface);
  box-shadow:0 1px 2px rgba(28,26,23,.04),0 10px 28px -18px rgba(28,26,23,.16)}

/* Kopfzeile wie auf einem echten Abzug: was es ist, und gleich daneben,
   dass der Betrieb erfunden ist. Umbruch erlaubt, auf dem Handy stehen
   die beiden Angaben untereinander. */
.fahne .kopf{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:4px 18px;padding:12px 20px;
  background:var(--bg-2);border-bottom:1px solid var(--line);
  font:800 10.5px var(--body);letter-spacing:.12em;color:var(--muted)}

/* Text links, Rand rechts. Der Rand ist schmal, weil dort nur halbe
   Saetze stehen. minmax(0,1fr), damit ein langes Wort die Spalte nicht
   aufdrueckt. */
.fahne .flaeche{display:grid;grid-template-columns:minmax(0,1fr) 186px}

.fahne .satz{padding:20px 22px 22px}
/* Eigene Schrift fuer den Beispieltext. Gleiche Spezifitaet wie
   ".artikel p:not([class])", gewinnt, weil diese Datei spaeter laedt. */
.artikel .fahne .satz p{margin:0;font:500 15.8px/1.72 var(--body);
  color:var(--text);text-wrap:pretty}
.artikel .fahne .satz p + p{margin-top:10px}
.artikel .fahne .satz .titel{font:800 17px/1.35 var(--disp);letter-spacing:-.022em}
.artikel .fahne .satz .titel + p{margin-top:6px}

/* Gestrichenes bleibt lesbar: Man soll sehen, was wegfaellt, und nicht
   raten muessen. Deshalb gedaempft statt ausgeblendet, und der Strich
   selbst in der dunklen Eisstufe, 2 px, damit er auch auf dem Handy
   als Strich erkennbar ist. */
.fahne del{color:var(--muted);
  text-decoration-line:line-through;text-decoration-color:var(--eis-tief);
  text-decoration-thickness:2px}

/* Ergaenztes ist hinterlegt UND unterstrichen. Die Flaeche allein waere
   eine reine Farbaussage; der Strich darunter traegt die Bedeutung auch
   ohne Farbe. Die Flaeche ist --ice mit 40 % Deckkraft, darauf bleibt
   --accent gut lesbar. clone: Bricht die Ergaenzung um, bekommt jede
   Zeile ihre eigene Flaeche statt einer halben. */
.fahne ins{padding:1px 3px;border-radius:4px;
  background:rgba(158,193,255,.4);color:var(--accent);
  text-decoration-line:underline;text-decoration-color:var(--eis-tief);
  text-decoration-thickness:2px;text-underline-offset:3px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Die Ziffer im Text verweist auf die Bemerkung am Rand, so wie es auf
   Papier ein Korrekturzeichen tut. Fuer Screenreader ist sie
   ausgeblendet, dort sagt die Bemerkung selbst, wozu sie gehoert.
   Zweitrangige Farbe (--ice mit --accent), wie in der ganzen Reihe. */
.fahne .nr{display:inline-flex;align-items:center;justify-content:center;
  flex:none;width:18px;height:18px;margin-left:4px;border-radius:50%;
  background:var(--ice);color:var(--accent);
  font:800 10.5px/1 var(--body);vertical-align:1px}

/* Der Rand. Gestrichelte Linie statt Flaeche: Es ist dasselbe Blatt,
   nur ein anderer Streifen davon. */
.fahne .rand{padding:20px 18px 22px;border-left:1px dashed var(--line)}
.fahne .etikett{display:block;margin-bottom:12px;
  font:800 10.5px var(--body);letter-spacing:.12em;color:var(--muted)}
.fahne .rand ol{list-style:none;display:grid;gap:14px}
.fahne .rand li{font:500 14.2px/1.5 var(--body);color:var(--text-2);
  text-wrap:pretty}
/* Die Art der Korrektur steht als Wort da, nicht nur als Farbe. */
.fahne .rand b{display:flex;align-items:center;gap:7px;margin-bottom:4px;
  font:800 10.5px var(--body);letter-spacing:.12em;color:var(--accent)}
.fahne .rand .nr{margin-left:0}

/* Nur fuer Screenreader. Uebliches Muster: ein Pixel gross, aber nicht
   display:none, sonst wuerde es auch nicht vorgelesen. */
.fahne .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0}

@media (max-width:640px){
  /* Neben dem Text blieben auf 330 px keine 186 px fuer den Rand. Dann
     steht der Rand unter dem Text, und die Ziffern verbinden beides
     weiter. */
  .fahne .flaeche{grid-template-columns:1fr}
  .fahne .rand{border-left:0;border-top:1px dashed var(--line);
    padding:16px 18px 18px}
  .fahne .satz{padding:18px 18px 20px}
  .fahne .kopf{padding:11px 18px}
  .artikel .fahne .satz p{font-size:15.4px}
  .artikel .fahne .satz .titel{font-size:16.4px}
}

/* ================= Wem gehoert Ihre Website: Schluesselbrett (wem-gehoert) ================= */
/* ============================================================
   Layout "Schluesselbrett" fuer Beitraege ueber Besitz und Zugaenge
   (zuerst: Wem gehoert Ihre Website?).

   Eine Website ist kein Ding, sondern ein Bund Schluessel, und jeder
   haengt woanders. Deshalb bekommt jedes Teil einen eigenen Anhaenger
   mit denselben drei Fragen. Man sieht auf einen Blick, dass es sechs
   Stueck sind und nicht einer, und kann sie untereinander vergleichen.
   Wieder aus HTML statt aus SVG, aus demselben Grund wie die
   Balkengrafik: Beschriftung, die mitschrumpft, ist auf dem Handy
   nicht mehr zu lesen. Hier bricht das Brett stattdessen um.

   Liegt vorerst in einer eigenen Datei, damit der Entwurf blog.css
   nicht anfasst. Beim Veroeffentlichen kann der Block in blog.css
   nach "Jahr" wandern; dann dort die Version hochzaehlen und den
   zweiten <link> im Beitrag streichen.
   ============================================================ */

/* Das Brett darf in den Randstreifen, in dem sonst die Notizen stehen:
   sechs Anhaenger in drei Spalten lesen sich wie ein echtes Brett, in
   zwei Spalten innerhalb der Textspalte wie eine Tabelle. -302px ist
   genau der Versatz der .notiz, damit beide rechts buendig enden.
   clear, weil ein Block ueber einen Float hinweg liefe, falls eine
   Notiz aus dem Abschnitt davor noch so weit herunterreicht. */
.schluessel{clear:both;margin-right:-302px}
.schluessel .brett{list-style:none;display:grid;
  grid-template-columns:repeat(3,1fr);gap:20px 14px;
  padding:clamp(18px,2.4vw,26px);border-radius:20px;background:var(--bg-2)}
/* Die Bildunterschrift bleibt in Lesebreite, auch wenn das Brett
   breiter ist. */
.schluessel figcaption{max-width:60ch}

/* Ein Haken: oben der Nagel, daran die Schnur, darunter der Anhaenger.
   Spalte statt Block, damit alle Anhaenger einer Reihe gleich lang
   sind, egal wie viel auf ihnen steht. Der Schatten sitzt am Haken und
   nicht am Anhaenger, weil clip-path ihn dort mit abschneiden wuerde. */
.schluessel .haken{position:relative;display:flex;flex-direction:column;
  padding-top:30px;
  filter:drop-shadow(0 1px 1px rgba(28,26,23,.05))
    drop-shadow(0 8px 14px rgba(28,26,23,.07))}
.schluessel .haken::before{content:"";position:absolute;z-index:2;
  left:50%;top:0;width:10px;height:10px;margin-left:-5px;
  border-radius:50%;background:var(--muted)}
/* Die Schnur endet in der Mitte der Oese (30 + 14 + 6 = 50 px). */
.schluessel .haken::after{content:"";position:absolute;z-index:2;
  left:50%;top:5px;width:2px;height:45px;margin-left:-1px;
  background:var(--muted)}

/* Der Anhaenger: oben abgeschraegt wie ein Kofferanhaenger, unten
   rund. Die abgeschraegten Ecken macht clip-path, die runden
   border-radius; beides vertraegt sich. */
.schluessel .anhaenger{position:relative;flex:1;
  padding:36px 18px 18px;border-radius:0 0 14px 14px;
  background:var(--surface);
  clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 24px,
    100% 100%,0 100%,0 24px)}
/* Die Oese. Sie hat die Farbe des Bretts, also sieht man durch sie
   hindurch; der Ring drumherum ist die Verstaerkung. */
.schluessel .anhaenger::before{content:"";position:absolute;
  left:50%;top:14px;width:12px;height:12px;margin-left:-6px;
  border-radius:50%;background:var(--bg-2);box-shadow:0 0 0 3px var(--sand)}

/* Name des Teils, davor ein kleiner Schluessel. Der Schluessel ist
   Schmuck und traegt keine Bedeutung, deshalb aria-hidden im HTML. */
/* Oben buendig statt mittig: "Google-Unternehmensprofil" bricht in
   schmalen Spalten um, und der Schluessel gehoert zur ersten Zeile. */
.schluessel .name{display:flex;align-items:flex-start;gap:11px;
  padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--line);
  font:800 17px/1.3 var(--disp);letter-spacing:-.022em;color:var(--text);
  text-wrap:balance}
/* Reide (der Ring zum Anfassen) als Kreis, Schaft und Bart als drei
   Farbflaechen in einem Element. Kein Bild, keine Schriftart. */
.schluessel .bart{position:relative;flex:none;width:31px;height:15px;
  margin-top:4px}
.schluessel .bart::before{content:"";position:absolute;left:0;top:0;
  width:15px;height:15px;border:3px solid var(--accent);border-radius:50%;
  box-sizing:border-box}
.schluessel .bart::after{content:"";position:absolute;left:14px;top:6px;
  width:17px;height:9px;
  background:
    linear-gradient(var(--accent),var(--accent)) 0 0/100% 3px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 8px 0/3px 7px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 14px 0/3px 9px no-repeat}

/* Die drei Felder. Das mittlere ist die eigentliche Antwort des
   Beitrags und liegt deshalb auf einer eigenen Flaeche; was es
   bedeutet, steht trotzdem als Wort darueber, nicht nur in der Farbe. */
.schluessel dl > div + div{margin-top:12px}
.schluessel dt{margin-bottom:4px;
  font:800 10.5px var(--body);letter-spacing:.12em;color:var(--muted)}
.schluessel dd{font:500 14.4px/1.55 var(--body);color:var(--text-2);
  text-wrap:pretty}
.schluessel dd b{color:var(--text);font-weight:800}
/* Beispieladressen nicht am Bindestrich trennen: "ihre-" am Zeilenende
   liest sich wie ein Tippfehler. Gilt auch im Fliesstext. */
.artikel .adr{white-space:nowrap}
.schluessel .soll{margin-inline:-8px;padding:10px 8px 11px;border-radius:10px;
  background:var(--bg-2)}

@media (max-width:1040px){
  /* Kein Randstreifen mehr: das Brett kommt zurueck in die Spalte, und
     drei Anhaenger auf 600 px waeren je knapp 190 px. Dann lieber zwei. */
  .schluessel{margin-right:0}
  .schluessel .brett{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  /* Zwei Anhaenger auf 330 px waeren je 150 px, zu schmal fuer drei
     Felder mit Text. Auf dem Handy haengen sie untereinander. */
  .schluessel .brett{grid-template-columns:1fr;gap:16px;padding:16px}
  .schluessel .anhaenger{padding:34px 16px 16px}
  .schluessel .name{font-size:16.4px}
}