/* Reinigung: Handwerk/Service. Signatur: Warnstreifen (Absperrband), Gelb als Markierstift, schmale schwere Schilderschrift. */
:root{--gelb:#ffd21a;--gelb-tief:#f0bd00;--streifen:repeating-linear-gradient(-45deg,var(--gelb) 0 12px,#0d2230 12px 24px)}
h1,h2,h3,.brand,.footer-mark,.stat strong,.card-title{font-variation-settings:"wdth" 74}
h3,.card-title{font-variation-settings:"wdth" 86}
body{font-variation-settings:"wdth" 100}
.eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;color:var(--brand)}
:root{--fs-hero:clamp(2.5rem,5.2vw,4.3rem)}
h1,h2,.hero h1{hyphens:manual;text-wrap:balance}

/* Header: petrolblau, Warnstreifen als Unterkante */
.site-header{position:sticky;overflow:visible;z-index:40}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;background:var(--streifen);pointer-events:none}
.brand{font-size:1.35rem;letter-spacing:-.01em}
.brand-mark{border-radius:6px}
body[data-header="solid"] .main-nav a{font-weight:650}
.main-nav .nav-cta,body[data-header="solid"] .main-nav .nav-cta{background:var(--gelb);color:#0d2230;border-color:var(--gelb);font-weight:750}
body[data-header="solid"] .main-nav .nav-cta:hover{background:#fff;color:#0d2230}
main{padding-top:9px}

/* Hero: Schild-Logik. Erste Zeile als Markierstift, Foto wie ein Aufkleber mit hartem Gelbschatten und Streifenkante */
.hero h1::first-line{background:linear-gradient(transparent 64%,var(--gelb) 64% 93%,transparent 93%)}
body[data-hero="split-image"] .hero-media{border:3px solid var(--ink);border-radius:var(--r);box-shadow:12px 12px 0 var(--gelb);overflow:hidden}
body[data-hero="split-image"] .hero-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:var(--streifen);z-index:2}
body[data-hero="split-image"] .hero-media img{display:block}
body[data-chip] .hero-chip{left:12px;bottom:28px;background:var(--ink);color:#fff;border-radius:6px;font-weight:600}
body[data-chip] .hero-chip span{color:#cfe3ec}
body[data-hero="split-image"] .hero .eyebrow{background:var(--gelb);color:#0d2230;border-radius:4px;padding:5px 12px}
body[data-hero="split-image"] .hero .lead{color:var(--ink);font-size:1.08rem;max-width:56ch}
.hero .search{border:2px solid var(--ink);border-radius:var(--r);box-shadow:6px 6px 0 rgba(13,34,48,.14)}
.search select,.search input{border:1.5px solid color-mix(in srgb,var(--ink) 35%,#fff)}
.search label,.field label{font-weight:750;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--muted)}

/* Buttons: Gelb mit dunkler Schrift (Kontrast >12:1), Kontur wie ein Schild */
.btn-signal,.dark-hero .btn-signal,.cta-band .btn-signal{background:var(--gelb);color:#0d2230;border:2px solid #0d2230;font-weight:750}
.btn-signal:hover,.dark-hero .btn-signal:hover,.cta-band .btn-signal:hover{background:var(--gelb-tief);filter:none}
.btn-brand{background:var(--ink);color:#fff;border:2px solid var(--ink);font-weight:700}
.btn-outline{border:2px solid var(--ink);color:var(--ink);font-weight:700}
.btn-outline:hover{background:var(--gelb);border-color:var(--ink)}
.dark-hero .btn-signal,.cta-band .btn-signal{border-color:#fff}

/* Karten: Aufkleber mit 2-px-Kontur, beim Hover Gelbschatten */
body[data-cards="flat-border"]{--surf-border:2px solid var(--ink);--surf-hover-border:var(--ink);--surf-hover-shadow:5px 5px 0 var(--gelb)}
body[data-cards="flat-border"] .card:hover,body[data-cards="flat-border"] .tile-link:hover,body[data-cards="flat-border"] .city-tile:hover,body[data-cards="flat-border"] .svc-card:hover{box-shadow:5px 5px 0 var(--gelb)}
@media (prefers-reduced-motion:no-preference){
  body[data-motion="lively"] :is(.card,.tile-link,.city-tile,.svc-card,.svc-link):hover{transform:translate(-3px,-3px)}
}
.avatar{background:var(--gelb);color:#0d2230;border:2px solid var(--ink);box-shadow:none;border-radius:6px;font-weight:800;font-variation-settings:"wdth" 80}
.card-meta{color:var(--muted)}
.stat strong{font-size:2.4rem;line-height:1}
.mini-chips li,.chip{border:1.5px solid color-mix(in srgb,var(--ink) 30%,#fff);background:#fff}
.badge{font-weight:700}

/* Abschnittsüberschriften: kleiner Warnstreifen als Anker */
body[data-headings="marker"] main>.section>h2:first-child::before,
body[data-headings="marker"] main>.section>.section-head h2::before,
body[data-headings="marker"] main>.section>.section-head>div>h2::before{width:.9em;height:.34em;background:var(--streifen);border-radius:1px;margin-right:.4em;vertical-align:.12em;border:1.5px solid var(--ink)}

/* Steps und Hinweise */
.steps li{border:2px solid var(--ink)}
.steps li>span{background:var(--gelb);color:#0d2230;border:2px solid var(--ink);font-weight:800}

/* Footer: Warnstreifen als Oberkante */
body[data-footer^="dark"] .site-footer{border-radius:var(--r-lg)}
.site-footer::after{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--streifen);z-index:2}
body[data-footer="dark-wordmark"] .footer-mark{color:rgba(255,255,255,.08)}

/* Ablauf-Band: dunkel, Warnstreifen oben, gelbe Ziffern */
.band{background:var(--dark);box-shadow:0 0 0 100vmax var(--dark);color:#fff}
.band::before{content:"";position:absolute;left:50%;width:100vw;margin-left:-50vw;top:0;height:10px;background:var(--streifen)}
body{overflow-x:clip}
.band{padding-top:calc(var(--band-pad) + 10px)}
.band h2,.band>.wrap>h2{color:#fff}
.band .steps li,.band .steps-num li{background:#fff;color:var(--ink);box-shadow:none;border:2px solid #fff}
.band .steps-num li>span,.steps-num li>span{background:var(--gelb);color:#0d2230;border:2px solid var(--ink);border-radius:6px;font-weight:800;font-size:1.1rem}
.band h2::before{border-color:#fff!important}
.stats .stat:first-child{background:var(--gelb)}
.stats .stat:first-child strong,.stats .stat:first-child span{color:#0d2230}
.stat span{color:var(--muted)}

/* Seitenköpfe und Bildrahmen im gleichen Aufkleber-Stil */
.city-media,.guide-media,.dark-hero-media{border:3px solid var(--ink);border-radius:var(--r);box-shadow:8px 8px 0 var(--gelb);overflow:hidden;position:relative}
.city-media::after,.guide-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--streifen)}
body[data-hero="split-image"] .page-head h1::after{width:96px;height:12px;border-radius:1px;background:var(--streifen);border:2px solid var(--ink);margin-top:16px}
.fact,.factbar>div,.keyfacts>div,.fact-card{border:2px solid var(--ink);background:#fff}
.factbar strong,.fact strong,.keyfacts dd{color:var(--ink)}
.crumbs a,.breadcrumb a{font-weight:600}

/* Ratgeber: Kennzahlen ruhiger, Tabellenkopf als Schildleiste */
.keyfacts dd{font-variation-settings:"wdth" 92;font-weight:700;font-size:1rem;line-height:1.3}
.keyfacts dt{font-weight:650;color:var(--muted)}
.prose table thead th{background:var(--dark);color:#fff;padding:8px 12px;text-align:left;font-weight:700}
.prose table td{padding:8px 12px}
.prose h2{font-variation-settings:"wdth" 80}

/* Mobil: Engine kippt split-image nicht in eine Spalte, hier nachgeholt */
@media (max-width:900px){
  body[data-hero="split-image"] .hero-has-img{grid-template-columns:minmax(0,1fr)}
  body[data-hero="split-image"] .hero-media{margin:6px 12px 14px 0;box-shadow:8px 8px 0 var(--gelb)}
  :root{--fs-hero:clamp(2.2rem,9.5vw,3.2rem)}
}
@media (max-width:640px){.stat strong{font-size:1.9rem}.hero .search{box-shadow:4px 4px 0 rgba(13,34,48,.14)}}
@media (max-width:640px){
  h1,h2,.hero h1{hyphens:auto;overflow-wrap:break-word}
  h1,.page-head h1{font-size:clamp(1.85rem,8.2vw,2.5rem)}
  .page-head>*,.city-head>*,.hero>*,.profile-hero>*{min-width:0}
}
@media (max-width:900px){
  .article-grid{grid-template-columns:minmax(0,1fr)}
  .article-grid>*{min-width:0}
  .prose :not(.table-wrap)>table{display:block;max-width:100%;overflow-x:auto}
}
main a,main li,main p{overflow-wrap:anywhere}
main .btn,main .card-title a{overflow-wrap:normal}

/* =====================================================================
   Runde 2: eigene Struktur. Objekt-Band, Leistungs-Matrix, Steuerbonus-Werkzeug,
   Checkliste, Marke, Stadtseiten. Gleiche Bausteine: Warnstreifen, Gelb, 2-px-Kontur.
   ===================================================================== */
:root{--logo-h:34px}

/* Marke: Bildmarke 2x2 mit gelbem Viertel, Wortmarke in Archivo */
.brand-custom{gap:10px}
.brand-word{font-variation-settings:"wdth" 74;font-size:1.5rem;font-weight:800;letter-spacing:-.012em;text-transform:none}
.brand-logo svg{height:34px}
.site-footer .brand-logo svg{height:30px}

/* Abschnittskopf der Module: gestapelt, nicht nebeneinander */
.mod-html{display:block}
.mod-html>.eyebrow{margin:0 0 6px}
.mod-html>h2{margin:0 0 10px}
.mod-html>.mod-intro{max-width:62ch;margin-bottom:18px}

/* Objekt-Band: dunkel, volle Breite, direkt unter dem Hero */
#mod-objekt{position:relative;background:var(--dark);box-shadow:0 0 0 100vmax var(--dark);clip-path:inset(0 -100vmax);color:#fff;padding:calc(var(--band-pad,44px) + 12px) 0 var(--band-pad,44px);margin-top:36px}
#mod-objekt::before{content:"";position:absolute;left:50%;width:100vw;margin-left:-50vw;top:0;height:12px;background:var(--streifen)}
#mod-objekt>.eyebrow{background:var(--gelb);color:#0d2230;display:inline-block;padding:4px 12px;border-radius:4px}
#mod-objekt>h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.6rem);max-width:22ch}
#mod-objekt>h2::before{display:none!important}
.objekt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:22px}
.objekt-card{background:#fff;color:var(--ink);border:3px solid #fff;border-radius:var(--r);padding:clamp(18px,2.6vw,28px);position:relative;box-shadow:8px 8px 0 var(--gelb)}
.objekt-photo{display:block;width:calc(100% + clamp(36px,5.2vw,56px));max-width:none;margin:calc(clamp(18px,2.6vw,28px) * -1) calc(clamp(18px,2.6vw,28px) * -1) 16px;aspect-ratio:16/8;object-fit:cover;border-bottom:3px solid var(--ink);border-radius:5px 5px 0 0}
.objekt-card h3{margin:6px 0 8px;font-size:1.5rem;line-height:1.05}
.objekt-card p{margin:0 0 10px;color:var(--muted)}
.objekt-tag{display:inline-block;margin:0!important;padding:3px 10px;background:var(--ink);color:#fff!important;font-weight:800;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;border-radius:3px}
.objekt-gw .objekt-tag{background:var(--brand)}
.objekt-card ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:0}
.objekt-card li{border-top:2px solid var(--ink)}
.objekt-card li a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 2px;min-height:44px;color:var(--ink);font-weight:700;text-decoration:none}
.objekt-card li a::after{content:"→";font-weight:800;flex:none}
.objekt-card li a:hover{background:var(--gelb)}

/* Leistungs-Matrix */
#mod-matrix{margin-top:var(--sec-gap,56px)}
.matrix{border:3px solid var(--ink);border-radius:var(--r);background:#fff;overflow:auto;box-shadow:8px 8px 0 var(--gelb)}
.matrix:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.matrix table{width:100%;border-collapse:collapse;font-size:.98rem}
.matrix thead th{background:var(--dark);color:#fff;text-align:left;padding:12px 16px;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.matrix tbody th{text-align:left;font-variation-settings:"wdth" 86;font-weight:800;font-size:1.2rem;line-height:1.1;padding:18px 16px;width:21%;vertical-align:top;color:var(--ink)}
.matrix tbody td{padding:18px 16px;vertical-align:top;line-height:1.5}
.matrix tbody tr+tr>*{border-top:2px solid var(--ink)}
.matrix tbody tr:nth-child(even){background:#edf1f3}
.matrix-who{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.matrix-who li{border:1.5px solid var(--ink);border-radius:999px;padding:2px 10px;font-size:.86rem;font-weight:650;background:#fff;white-space:nowrap}
.matrix-go{white-space:nowrap}
.matrix-go a{font-weight:750;color:var(--brand);display:inline-flex;min-height:44px;align-items:center}
.matrix-note{font-size:.88rem;color:var(--muted);margin:14px 0 0;max-width:70ch}
@media (max-width:760px){
  .matrix{overflow:visible;border:0;box-shadow:none;background:none}
  .matrix table,.matrix tbody,.matrix tr,.matrix th,.matrix td{display:block}
  .matrix thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .matrix tbody tr{border:3px solid var(--ink);border-radius:var(--r);background:#fff!important;margin-bottom:16px;box-shadow:5px 5px 0 var(--gelb)}
  .matrix tbody tr+tr>*{border-top:0}
  .matrix tbody th{width:auto;padding:14px 16px 4px;font-size:1.3rem}
  .matrix tbody td{padding:6px 16px}
  .matrix tbody td[data-label]::before{content:attr(data-label);display:block;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
  .matrix-go{padding-bottom:10px!important}
  .objekt-grid{grid-template-columns:minmax(0,1fr)}
}

/* Steuerbonus: Rechner als Schild */
.mod-tool{background:var(--tint);border:3px solid var(--ink);border-radius:var(--r);box-shadow:8px 8px 0 var(--gelb);position:relative;overflow:hidden;padding-top:calc(clamp(20px,3.4vw,34px) + 10px)}
.mod-tool::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--streifen)}
.mod-tool .mod-copy{flex:1 1 320px}
.mod-tool .mod-copy h2{font-size:clamp(1.6rem,3vw,2.3rem);max-width:20ch}
.mod-tool .mod-tool-inline{flex:1 1 440px}
.tool-source{margin:14px 0 0}
.tool-box{border:2px solid var(--ink);box-shadow:none;border-radius:var(--r)}
.tool-box label{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tool-box input:not([type=checkbox]),.tool-box select{border:2px solid var(--ink);font-weight:600;font-size:1rem;text-transform:none;letter-spacing:0;color:var(--ink)}
.tool-box input:focus-visible,.tool-box select:focus-visible{outline:3px solid var(--gelb);outline-offset:1px;border-color:var(--ink)}
.tool-box .tool-check{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--ink);font-weight:600;min-height:44px;grid-column:1/-1}
.tool-result{background:var(--dark);color:#fff;border-radius:var(--r);padding:18px 20px;display:grid;gap:4px;border:0}
.tool-result .tool-result-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--gelb)}
.tool-result strong{color:#fff;font-size:clamp(2rem,4.4vw,3rem);font-variation-settings:"wdth" 74;font-weight:800}
.tool-result .tool-result-note{font-weight:500;font-size:.9rem;color:#dbe9f0;max-width:56ch}
.tool-table{margin-top:14px}
.tool-box th{font-weight:650;color:var(--muted);width:55%}
.tool-box td{font-weight:750;text-align:right!important;font-variant-numeric:tabular-nums}

/* Checkliste: Klemmbrett */
#mod-checkliste{display:block;position:relative;border:3px solid var(--ink);border-radius:var(--r);background:#fff;padding:calc(clamp(20px,3vw,34px) + 18px) clamp(18px,3vw,34px) clamp(20px,3vw,34px);margin-top:var(--sec-gap,56px)}
#mod-checkliste::before{content:"";position:absolute;left:50%;top:-16px;width:140px;height:34px;margin-left:-70px;background:var(--gelb);border:3px solid var(--ink);border-radius:8px}
#mod-checkliste .mod-copy h2{font-size:clamp(1.6rem,3vw,2.3rem)}
#mod-checkliste .mod-checks{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 28px}
#mod-checkliste .mod-checks li{border:0;border-bottom:2px dashed color-mix(in srgb,var(--ink) 35%,#fff);border-radius:0;background:none;padding:12px 0}
#mod-checkliste .mod-check input{accent-color:var(--ink);width:24px;height:24px}
#mod-checkliste .mod-check-text strong{font-weight:800;font-size:1.02rem}
#mod-checkliste .mod-check-text span{color:var(--muted);font-size:.93rem;line-height:1.45}
#mod-checkliste .mod-check input:checked+.mod-check-text strong{text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--gelb)}

/* Kennzahlen: gelbes Schild links, Rest Aufkleber; Quelle klein */
.stats-custom .stat{border:2px solid var(--ink);box-shadow:none}
.stats-custom .stat strong{font-variation-settings:"wdth" 74;font-weight:800}
.stat-src a{text-decoration:underline}

/* Stadtseiten: Piktogramm links, Objekt-Band, Steuer-Teaser */
.city-head.img-left{grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center}
.city-head.img-left .city-media{box-shadow:8px 8px 0 var(--gelb);background:var(--tint)}
.city-head .city-media img.img-svg{object-fit:cover}
.mod-band.mod-dark{background:var(--dark);border:3px solid var(--ink);border-radius:var(--r);padding-top:calc(clamp(22px,4vw,40px) + 12px)}
.mod-band.mod-dark::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:var(--streifen)}
.mod-band.mod-dark .eyebrow{background:var(--gelb);color:#0d2230;display:inline-block;padding:3px 10px;border-radius:4px}
.mod-band.mod-dark h2{font-size:clamp(1.5rem,3vw,2.2rem)}
.mod-band .mod-btn{border-color:#fff}
.mod-callout{border:2px solid var(--ink);border-left:10px solid var(--gelb)}
.mod-tool .btn-lg{white-space:normal}
@media (max-width:900px){.city-head.img-left{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.mod-tool{box-shadow:5px 5px 0 var(--gelb)}.objekt-card{box-shadow:5px 5px 0 var(--gelb)}.brand-word{font-size:1.3rem}}
@media (prefers-reduced-motion:reduce){.objekt-card li a{transition:none}}
.mod-html>.mod-html.prose,.mod-html>.prose{max-width:none}
.tool-box .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.tool-box .tool-grid>label:first-child{grid-column:1/-1}
@media (max-width:520px){.tool-box .tool-grid{grid-template-columns:minmax(0,1fr)}}
#mod-checkliste .mod-checks{max-width:none}
.city-head h1{font-size:clamp(2rem,3.5vw,3.1rem);overflow-wrap:normal;hyphens:manual}
.city-head.img-left h1{margin-top:0}
.tool-box .tool-grid input:not([type=checkbox]),.tool-box .tool-grid select{border:2px solid var(--ink)}

/* =====================================================================
   Runde 3: warmer Grund, eigenes Lockup, Schlüsselanhänger-Städte,
   Werkzeug im Stadtkopf, Rechenbeispiel-Bon im Ratgeber
   ===================================================================== */
body{background:var(--bg)}
.crumbs a,.breadcrumb a{color:var(--brand)}

/* Lockup: Warnschild (Bildmarke) + Absperrband-Schild (Wortmarke) */
.brand-custom{gap:12px;align-items:center}
.brand-logo svg{height:38px;width:38px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.28))}
.site-footer .brand-logo svg{height:34px;width:34px}
.brand-custom .brand-word{position:relative;display:inline-block;color:#0d2230;font-size:1.34rem;line-height:1.05;padding:4px 22px 5px;border:2px solid #fff;border-radius:3px;transform:rotate(-1.6deg);
  background:var(--streifen) left/13px 100% no-repeat,var(--streifen) right/13px 100% no-repeat,var(--gelb);
  box-shadow:3px 3px 0 rgba(13,34,48,.45)}
.brand-custom:hover .brand-word{transform:rotate(0deg)}
@media (prefers-reduced-motion:no-preference){.brand-custom .brand-word{transition:transform .18s ease}}
.brand-custom:focus-visible{outline:3px solid var(--gelb);outline-offset:4px;border-radius:4px}
@media (max-width:640px){.brand-custom{gap:9px}.brand-custom .brand-word{font-size:1.12rem;padding:3px 17px 4px}.brand-logo svg{height:32px;width:32px}}

/* Städte als Schlüsselanhänger (Schlüsselbrett der Hausverwaltung): Lochöse, Name als Beschriftung */
.city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px 18px}
.city-tile{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4px 10px;background:#fff;border:2px solid var(--ink);border-radius:6px 6px 6px 26px;padding:34px 16px 14px 18px;min-height:112px;color:var(--ink);text-decoration:none;box-shadow:none;overflow:visible}
.city-tile::before{content:"";position:absolute;top:11px;right:14px;width:15px;height:15px;border-radius:50%;background:var(--bg);border:2px solid var(--ink);box-shadow:inset 2px 2px 0 rgba(13,34,48,.2)}
.city-tile::after{content:"";position:absolute;left:18px;top:14px;width:46px;height:9px;background:var(--streifen);border:1.5px solid var(--ink);border-radius:1px}
.city-tile strong{grid-column:1/-1;font-variation-settings:"wdth" 74;font-weight:800;font-size:1.5rem;line-height:1.05;letter-spacing:-.01em;color:var(--ink)}
.city-tile .muted{grid-column:1;font-size:.9rem;color:var(--muted);line-height:1.35}
.city-tile svg{grid-column:2;grid-row:2;color:var(--ink);align-self:end}
.city-tile:hover,.city-tile:focus-visible{background:var(--gelb);box-shadow:5px 5px 0 var(--ink)}
.city-tile:hover .muted,.city-tile:focus-visible .muted{color:#0d2230}
.city-tile:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){.city-tile{transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.city-tile:hover{transform:translate(-3px,-3px)}}
@media (max-width:520px){.city-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}.city-tile{padding:32px 12px 12px 14px;min-height:104px}.city-tile strong{font-size:1.28rem;overflow-wrap:anywhere}.city-tile::after{left:14px}.city-tile .muted{font-size:.82rem}}

/* Stadtseite: Werkzeug als Kopfbereich im gleichen Schild-Stil */
.cp-toolhead{margin:22px 0 40px}
.cp-toolhead .mod-tool{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--gelb);margin:0}
@media (max-width:640px){.cp-toolhead .mod-tool{box-shadow:5px 5px 0 var(--gelb)}}

/* Rechenbeispiel im Ratgeber: Kassenbon mit Zackenkante */
.rb-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px;margin:26px 0;align-items:start}
.rb{position:relative;background:#fff;border:2px solid var(--ink);border-radius:4px;padding:20px clamp(16px,3vw,26px) 22px;box-shadow:6px 6px 0 var(--gelb)}
.rb-tag{display:inline-block;margin:0 0 8px;padding:3px 10px;background:var(--gelb);color:#0d2230;border:2px solid var(--ink);border-radius:3px;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.rb-title{margin:0 0 10px;font-size:1.45rem;line-height:1.1;font-variation-settings:"wdth" 80}
.rb-title::before,.rb-title::after{display:none!important}
.rb-rows{margin:0;font-variant-numeric:tabular-nums}
.rb-rows>div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:2px dashed color-mix(in srgb,var(--ink) 35%,#fff)}
.rb-rows dt{margin:0;color:var(--muted);font-weight:600}
.rb-rows dd{margin:0;font-weight:800;text-align:right;color:var(--ink);white-space:nowrap}
.rb-rows>.rb-sum{border-bottom:0;margin-top:8px;padding:10px 12px;background:var(--gelb);border:2px solid var(--ink);border-radius:4px}
.rb-rows>.rb-sum dt{color:#0d2230;font-weight:800}
.rb-rows>.rb-sum dd{font-size:1.15rem;white-space:normal}
.rb-note{margin:14px 0 0;font-size:.88rem;color:var(--muted);line-height:1.5}
.rb-note a{color:var(--brand);font-weight:650;text-decoration:underline}
@media (max-width:520px){.rb-rows>div{flex-direction:column;gap:2px}.rb-rows dd{text-align:left}}
.guide-head .keyfacts,.keyfacts{gap:12px}