/* PHBAU-NORD: Regeln fuer alle Seiten (Geruest, Ausbau Etappe 3, 31.10.2026). Was nur eine Seite braucht, steht dort inline.
   Reihenfolge wie vorher in index.html, so tauscht kein Paar gleich starker Regeln die Plaetze. Eingebunden mit ?v=JJJJMMTTn,
   bei jeder Aenderung hochzaehlen und diese Datei vor dem HTML hochladen. */
/* D-DIN (SIL OFL 1.1, Datto Inc.), umbenannt wegen der reservierten Namen, Lizenz: fonts/OFL-ddin.txt.
   Teilmengen der Schrift. Es fehlen u. a. ≈, →, ẞ und schmale Leerzeichen: Zahl und Einheit
   deshalb mit  , "rund" statt ≈. */
@font-face{font-family:"Phbau Schnitt";src:url(fonts/phbau-schnitt-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Phbau Schnitt";src:url(fonts/phbau-schnitt-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Phbau Schnitt Eng";src:url(fonts/phbau-schnitt-eng-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Palette "Was drunter liegt" (Kontraste berechnet am 16.10.2026) */
  --papier:#fcfcfa;          /* Seitengrund */
  --tusche:#1b273f;          /* Logo "PHBAU": Text, Linien; 14,51:1 auf Papier */
  --markierung:#ee7400;      /* Logo "-NORD": auf Papier 2,87:1, dort nie Schrift und nie einziges Merkmal */
  --bleistift:#5f6878;       /* Nebentext, Rahmen; 5,47:1 auf Papier, nie auf Tusche */
  --rost:#c04916;            /* Links auf Papier, 4,86:1 */
  --splitt:#edeeec;          /* nur Wechselflaechen */
  --rost-tief:#ad400f;       /* Links auf Splitt, 5,13:1 */
  --tusche-tief:#121a2b;     /* Fuss */
  --pause-hell:#aeb7c6;      /* Nebentext auf Tusche, 7,38:1 */
  --rost-hell:#db5319;       /* Linien auf Tusche, 3,74:1, keine kleine Schrift */
  --tusche-hell:#2c3a55;     /* Zeigen auf Tusche-Knoepfen, Badge-Grund im Fuss */
  --markierung-hell:#f08a22; /* Zeigen auf Markierung */
  --linie-auf-tusche:rgba(252,252,250,.18);
  /* Fokusring: 3 px, 6 px Abstand, Hof in Markierung; Farbe je Flaeche */
  --fokus:var(--tusche); --hof:rgba(238,116,0,.45);
  /* Schrift: eine Familie */
  --f-text:"Phbau Schnitt",Bahnschrift,Arial,sans-serif;
  --f-eng:"Phbau Schnitt Eng","Bahnschrift Condensed","Arial Narrow",sans-serif;
  --fs-text:1.125rem;        /* 18 px am Handy, ab 981 px 19 px */
  --fs-klein:.9375rem;
  --fs-h1:clamp(3.4rem,min(17vw,16svh),9.6rem);
  --fs-h2:clamp(2.25rem,1.5rem + 3.2vw,4rem);
  --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  /* Raster. Spalte in rem (1240 px bei 16 px): Mit den em-Grenzen steht der Burger bei grosser
     Browserschrift auch ueber 1240 px, und das feste Kaestchen am Fensterrand muss ueber ihm liegen. */
  --w-max:77.5rem; --w-text:68ch; --gutter:clamp(20px,5vw,40px);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:80px; --sp-10:120px;
  --sect-pad:56px; --header-h:72px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* Hoehe des Hinweises, bis das Skript am Seitenende sie misst. Gemessen 16.10.2026 bei 16 px:
     149 px bis 375 px Breite, bis 980 px hoechstens 168 px, darueber 78 px. In rem, damit sie mit der Grundschrift waechst. */
  --ck-h0:9.3125rem;
}
@media (min-width:30.0625em){:root{--ck-h0:10.5rem}}
/* Am Rechner zwei Zeilen Hinweistext (Zeilenhoehe 1,5) plus 2 x 16 px Polster plus Linie: stimmt bei 16 und 24 px */
@media (min-width:61.3125em){:root{--ck-h0:calc(3 * var(--fs-klein) + 33.5px)}}
@media (min-width:781px){:root{--sect-pad:72px; --header-h:84px}}
@media (min-width:981px){:root{--sect-pad:96px; --fs-text:1.1875rem}}
@media (min-width:1200px){:root{--sect-pad:120px; --header-h:92px}}
/* Kurze Fenster (Laptops, 657 bis 800 px hoch): flacher Kopf, damit H1 und Band in den ersten Bildschirm passen */
@media (min-width:781px) and (max-height:50em){:root{--header-h:76px}}
@media (max-width:480px){:root{--sect-pad:48px}}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
/* Nur diese eine Anker-Methode: Kopfhoehe plus seine 1-px-Linie plus 1 px gegen die Subpixel-Rundung
   (ohne ihn lagen die Ziele 0,2 bis 0,5 px unter dem Kopf). Kein scroll-behavior:smooth: lange Fahrten
   stoeren und spielten die ganze Schnitt-Geschichte im Vorbeiflug ab. */
html{scroll-padding-top:calc(var(--header-h) + 2px); -webkit-text-size-adjust:100%; background:var(--papier)}
/* Unten ein Grundabstand fuer den Fokus-Scroll: Ohne ihn stand ein Link beim Tabben nach unten buendig am Fensterrand, sein Ring
   (9 px) lag ausserhalb (768 x 1024 ohne Hinweis, gemessen mit Ring). Hinweis und Anruf-Leiste ersetzen den Wert unten. */
html{scroll-padding-bottom:var(--sp-4)}
/* Fokus-Scroll legt Felder sonst unter die festen Leisten. Bei offenem Hinweis steht die Anruf-Leiste
   darueber, dann addieren sich beide Hoehen (Regel unten). */
html.ck-open{scroll-padding-bottom:calc(var(--ck-h,var(--ck-h0)) + var(--sp-4))}
/* --frei: Fenster minus Kopf (mit Linie) minus Hinweis. Daran haengen am Rechner Foto und H1 des ersten Bildschirms
   und die Buehne der Signatur. */
html{--frei:calc(100svh - var(--header-h) - 1px)}
html.ck-open{--frei:calc(100svh - var(--header-h) - 1px - var(--ck-h,var(--ck-h0)))}
@media (max-width:30em) and (min-height:25em){
  html.past-hero:not(.ck-open){scroll-padding-bottom:calc(56px + env(safe-area-inset-bottom) + var(--sp-4))}
  html.past-hero.ck-open{scroll-padding-bottom:calc(var(--ck-h,var(--ck-h0)) + 56px + var(--sp-4))}
}
body{font-family:var(--f-text); font-size:var(--fs-text); font-weight:400; line-height:1.55;
  color:var(--tusche); background:var(--papier); hyphens:auto}
/* overflow-x nur hier, nie an html/body: sonst klebt der Kopf am iPhone nicht */
main{display:block; overflow-x:clip}
img,svg{display:block; max-width:100%; height:auto}
a{color:inherit}
strong,b{font-weight:700}
button,input,select,textarea{font:inherit; color:inherit}
ul{list-style:none; padding:0}
h1,h2{font-family:var(--f-eng); font-weight:700; color:var(--tusche); letter-spacing:-.005em;
  hyphens:manual; overflow-wrap:break-word}
/* balance: aendert die Zeilenzahl nicht, nur die Verteilung ("Unten / fängt’s an." statt Waise "an.") */
h1{font-size:var(--fs-h1); line-height:.86; text-wrap:balance}
h2{font-size:var(--fs-h2); line-height:.92; text-wrap:balance}
h3{font-family:var(--f-text); font-weight:700; font-size:var(--fs-h3); line-height:1.2; hyphens:manual}
p,li,dd{text-wrap:pretty}

.wrap{width:100%; max-width:var(--w-max); margin-inline:auto; padding-inline:var(--gutter)}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
/* Nur fuer Screenreader (Statuszeile des Rechners, "erledigt" an den Schrittmarken) */
.vh{position:absolute; clip-path:inset(50%); width:1px; height:1px; overflow:hidden}

:where(a,button,summary,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid var(--fokus); outline-offset:6px; box-shadow:0 0 0 9px var(--hof)}
/* Sprungziele bekommen tabindex -1 fuer die Fokus-Uebergabe: ein Ring um den ganzen Abschnitt irrefuehrt */
[tabindex="-1"]:focus{outline:none; box-shadow:none}
/* Platz fuer den Ring (9 px) beim Fokus-Scroll auch rueckwaerts: Shift+Tab legt das Ziel sonst buendig an scroll-padding-top, der Ring
   lag 8 px unter dem Kopf (betraf FAQ-Fragen, Telefon-Links, Knoepfe der Planblaetter, Rechner-Kacheln) */
main :where(a[href],summary,.calc__kr,.calc__cr){scroll-margin-block:12px}

/* ---------- Knopf "Bordkante": Zeigen hebt 3 px an und laesst die Rost-Kante wachsen, Druecken verdichtet ---------- */
/* Kein nowrap: bei 24 px Grundschrift liefe der Knopf bei 320 px ueber.
   Die Nummer haelt per   zusammen, umbrechen darf nur der Text davor. */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:var(--sp-3) var(--sp-5); background:var(--markierung); color:var(--tusche);
  font-weight:700; font-size:1.0625rem; line-height:1.2; text-decoration:none;
  border:0; border-bottom:3px solid transparent; cursor:pointer}
.btn:active{translate:0 0; border-bottom-width:1px}
@media (hover:hover){.btn:hover{background:var(--markierung-hell); translate:0 -3px; border-bottom-color:var(--rost)}}
.btn--tusche{background:var(--tusche); color:var(--papier)}
@media (hover:hover){.btn--tusche:hover{background:var(--tusche-hell)}}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:background .16s var(--ease-out), translate .16s var(--ease-out), border-color .16s}
  .btn:active{transition-duration:.09s}
}
@media (prefers-reduced-motion:reduce){.btn:hover{translate:none}}

/* ---------- Kopf ---------- */
.hdr{position:sticky; top:0; z-index:90; background:var(--papier); border-bottom:1px solid var(--bleistift)}
.hdr__in{display:flex; align-items:center; gap:var(--sp-6); height:var(--header-h);
  width:100%; max-width:var(--w-max); margin-inline:auto; padding-inline:var(--gutter)}
.hdr__logo{display:block; margin-right:auto; flex:0 0 auto}
.hdr__logo img{height:40px; width:auto}
@media (min-width:781px){.hdr__logo img{height:52px}}
/* Fokus im klebenden Kopf: Chrome haelt Ziele in der scroll-padding-Zone fuer verdeckt und scrollt
   die Seite zurueck (gemessen 10.10.2026). Betrag groesser als scroll-padding-top.
   Nicht an den Links im Handy-Panel: dort wuerde Shift+Tab im Panel-Scroller das Ziel verdeckt lassen. */
.hdr__logo,.tel-cta{scroll-margin-top:-160px}
@media (min-width:61.3125em){.nav__list a{scroll-margin-top:-160px}}

/* fixed statt absolute: sonst scrollt der Klick aufs Scrim die Seite zur Layout-Position des
   Schalters zurueck. Der Kopf klebt ohnehin, optisch aendert sich nichts. */
.nav-t{display:none; position:fixed; opacity:0; margin:0; width:44px; height:44px;
  right:var(--gutter); top:calc((var(--header-h) - 44px) / 2); z-index:3; cursor:pointer}
.burger{display:none; position:relative; width:44px; height:44px; flex:0 0 auto; margin-right:-10px}
.burger i{position:absolute; left:10px; width:24px; height:2px; background:var(--tusche)}
.burger i:nth-child(1){top:15px} .burger i:nth-child(2){top:21px} .burger i:nth-child(3){top:27px}
/* Das Kreuz sagt, was der naechste Druck tut. In Tusche, denn Markierung hat auf Papier keine 3:1. */
.nav-t:checked ~ .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-t:checked ~ .burger i:nth-child(2){opacity:0}
.nav-t:checked ~ .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-t:focus-visible ~ .burger{outline:3px solid var(--fokus); outline-offset:2px; box-shadow:0 0 0 5px var(--hof)}
@media (prefers-reduced-motion:no-preference){.burger i{transition:transform .22s var(--ease-out), opacity .14s}}
@media (forced-colors:active){.burger i{background:CanvasText}}
.nav-scrim{display:none}

.nav__list{display:flex; align-items:center; gap:28px}
.nav__list a{display:block; font-weight:700; font-size:1.0625rem; text-decoration:none; white-space:nowrap;
  padding:var(--sp-2) 0; border-bottom:3px solid transparent}
@media (hover:hover){.nav__list a:hover{border-bottom-color:var(--rost)}}
.nav__mob,.nav__quick{display:none}

/* Was "nicht mehr passt", schaltet ueber em: Media Queries rechnen mit der Browserschrift, so
   greifen die Grenzen bei 24 px Grundschrift frueher.
   30em = 480 px und 61.25em = 980 px bei 16 px. */
.tel-cta{flex:0 0 auto; min-height:44px; padding:var(--sp-2) var(--sp-4)}
@media (max-width:30em){.tel-cta{display:none}}

@media (max-width:61.25em){
  .burger,.nav-t{display:block}
  /* Panel unter dem Kopf: visibility nimmt es zugeklappt aus dem Tab-Pfad,
     der Uebergang haelt es beim Zuklappen sichtbar. Die 64 px Abzug lassen einen Scrim-Streifen
     zum Schliessen stehen (gemessen 01.09.2026). Mit Hinweis endet das Panel an seiner Oberkante:
     Der Hinweis ist dann inert, ein Tipp darauf geht wie pointer-events:none an den Scrim darunter
     und schliesst. So bleibt der Anruf-Knopf auch bei 320 x 568 mit Hinweis im Bild. */
  .nav{--fokus:var(--markierung); position:fixed; left:0; right:0; top:var(--header-h); z-index:80;
    display:grid; grid-template-rows:0fr; background:var(--tusche); color:var(--papier);
    max-height:calc(100dvh - var(--header-h) - 64px); visibility:hidden}
  html.ck-open .nav{max-height:calc(100dvh - var(--header-h) - var(--ck-h,var(--ck-h0)))}
  .nav > .nav__inner{overflow:hidden; min-height:0}
  .nav-t:checked ~ .nav{grid-template-rows:1fr; visibility:visible}
  .nav-t:checked ~ .nav > .nav__inner{overflow-y:auto; overscroll-behavior:contain}
  .nav-t:checked ~ .nav-scrim{display:block; position:fixed; inset:var(--header-h) 0 0 0; z-index:70;
    background:rgba(18,26,43,.45)}
  /* Zwei Spalten, damit der Anruf-Knopf bei 390 x 664 ohne Scrollen im Panel steht.
     Die Reihenfolge laeuft spaltenweise, so wie die Abschnitte auf der Seite. */
  .nav__mob{display:block}
  .nav__list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(5,auto);
    grid-auto-flow:column; align-items:start; gap:0 var(--sp-5); padding:var(--sp-3) var(--gutter) 0}
  .nav__list a{display:flex; align-items:center; min-height:48px; padding:var(--sp-2) 0; white-space:normal;
    color:var(--papier); font-family:var(--f-eng); font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem); line-height:1;
    hyphens:manual; border-bottom:1px solid var(--linie-auf-tusche)}
  @media (hover:hover){.nav__list a:hover{border-bottom-color:var(--markierung)}}
  /* Live gegangene Blaetter klein unter "Leistungen" (Bauplan 5.3), mit dem Pfeil der Brotkrumen. Am Rechner gibt es kein
     Aufklapp-Menue, dort blendet nav__mob sie aus. */
  .nav__blaetter{list-style:none; padding:0}
  .nav__list .nav__blaetter a{min-height:44px; padding-block:var(--sp-1); font-family:var(--f-text); font-size:1.0625rem; line-height:1.2}
  .nav__blaetter a::before{content:"›"; content:"›" / ""; margin-right:.45em}
  /* Unter 40em Fensterhoehe fehlt die Zeile: Der Anruf-Knopf rutschte mit offenem Hinweis unter die Kante des Panels (gemessen
     03.11.2026: 320 x 568 Knopf 440 statt hoechstens 419 px, 390 x 664 mit 24 px Schrift 511 statt 478). Dort fuehrt der Stein zum Blatt. */
  @media (max-height:40em){.nav__blaetter{display:none}}
  .nav__quick{display:block; padding:var(--sp-5) var(--gutter) var(--sp-6)}
  .nav__quick .btn{white-space:normal}
  @media (hover:hover){.nav__quick .btn:hover{border-bottom-color:var(--rost-hell)}}
  .nav__quick p{margin-top:var(--sp-4); max-width:42ch; color:var(--pause-hell); font-size:var(--fs-klein); line-height:1.5}
  .nav__mail{display:inline-block; margin-top:var(--sp-2); min-height:44px; line-height:44px;
    font-weight:700; text-decoration:none; overflow-wrap:anywhere}
  html:has(.nav-t:checked){overflow:hidden}
  /* Ohne JS gibt es kein inert: dann nimmt visibility den Hintergrund aus dem Tab-Pfad */
  html:not(.js):has(.nav-t:checked) :is(main,footer,.callbar){visibility:hidden}
  /* Der Hinweis liegt ueber dem Scrim und ist bei offenem Menue inert: abgedunkelt wie der Rest der Seite */
  html:has(.nav-t:checked) .ck::after{content:""; position:absolute; inset:0; background:rgba(18,26,43,.45)}
}
@media (max-width:61.25em) and (prefers-reduced-motion:no-preference){
  .nav{transition:grid-template-rows .28s var(--ease-out), visibility .28s}
}

/* ---------- Anruf-Leiste: nur unter 481 px, erst nach dem ersten Bildschirm, bei offenem Hinweis direkt darueber ---------- */
.callbar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:110;
  background:var(--markierung); color:var(--tusche); font-weight:700; font-size:1.15rem;
  height:calc(56px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom)}
/* Der Link fuellt die Leiste: die ganze Flaeche bleibt Tippziel */
.callbar a{display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:inherit; text-decoration:none}
/* Nur mit Hoehe: bei 400 % Zoom oder quer gehaltenem Handy fraessen Kopf und Leiste sonst bis 72 % des
   Fensters. 25em = 400 px bei 16 px, bei 24 px Grundschrift 600 px (390 x 664 behaelt die Leiste). */
@media (max-width:30em) and (min-height:25em){
  html.past-hero .callbar{display:flex}
  /* Ueber dem Hinweis: Den sicheren Rand unten deckt dann der Hinweis */
  html.ck-open .callbar{bottom:var(--ck-h,var(--ck-h0)); height:56px; padding-bottom:0}
  /* Nach "Nicht mehr anzeigen" rueckt die Leiste genau auf den eben getippten Knopf (44 px Deckung): eine halbe Sekunde
     keine Tipps, sonst oeffnet ein zweiter Tipp das Telefon (ck-zu setzt das Skript) */
  html.ck-zu .callbar{pointer-events:none}
  /* Bei offenem Hinweis aus, solange der Rechner in den Schritten 1 bis 3 im Bild ist: Dort traegt sein klebender Fuss den
     naechsten Schritt, und Weiter laege sonst noch 56 px hoeher (calc-sicht setzt das Skript) */
  html.ck-open.calc-sicht:has(#calc-box:not([data-akt="4"])) .callbar{display:none}
  /* Bei fokussiertem Eingabefeld weg, bei offenem Menue auch: das hat seinen eigenen Knopf.
     Gemeint ist die Bildschirmtastatur: Menue-Kaestchen, Kacheln und Radioknoepfe des Rechners zaehlen nicht. */
  html.past-hero:has(:is(input:not(#nav-t,[type=checkbox],[type=radio]),textarea,select):focus) .callbar{display:none}
  html:has(.nav-t:checked) .callbar{display:none}
}
/* Ring innen: aussen laege er oben auf dem Fuss mit 1,17:1, an den anderen Seiten ausserhalb des Fensters */
.callbar a:focus-visible{outline-color:var(--tusche); outline-offset:-6px; box-shadow:none}
/* Wird der Satz eng (ab 28 px Grundschrift bis 375 px Breite, ab 24 px bei 320 px), steht nur die Nummer: Sonst brach er in der festen
   56-px-Leiste zweizeilig um und die Nummer ragte unter den Bildschirmrand */
@media (max-width:13.5em){.callbar__wer{display:none}}
/* Faehrt von unten ein; Startwert aus @starting-style, weil sie von display:none kommt */
@media (max-width:30em) and (min-height:25em) and (prefers-reduced-motion:no-preference){
  .callbar{translate:0 100%; transition:translate .26s var(--ease-out), bottom .26s var(--ease-out), display .26s allow-discrete}
  html.past-hero .callbar{translate:0 0}
  @starting-style{html.past-hero .callbar{translate:0 100%}}
}
/* Signatur bei offenem Hinweis: Die Leiste steht dort nur, wenn ueber ihr die Buehne (mindestens 180 px) und jeder Takt-Text
   (bis 234 px) ganz Platz haben, sonst bleibt sie aus, solange der Abschnitt im Bild ist (sig-sicht setzt das Skript).
   Schwelle 664 px Fensterhoehe, gemessen 29.10.2026 mit peer-signatur-mess.mjs. */
@media screen and (prefers-reduced-motion:no-preference) and (min-height:31.25em) and (max-height:41.4375em) and (max-width:30em){
  html.ck-open.sig-sicht .callbar{display:none}
}

/* ---------- Schnittband: Schnitt durch eine Einfahrt, Masse in cm ---------- */
/* Schraffuren als Daten-URI, zusammen rund 7 KB gezippt: Der Auftakt laeuft ab dem ersten Bild, ein
   nachladendes Muster kaeme mitten in ihn hinein. Signatur und Rechner nutzen dieselben Kacheln. */
:root{
  --muster-stein:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80' preserveAspectRatio='none' fill='%231b273f'%3E%3Cpath d='M2.0 5L7.0 0H193.0L198.0 5V80H2.0z'/%3E%3Cpath d='M202.0 5L207.0 0H293.0L298.0 5V80H202.0z'/%3E%3C/svg%3E");
  --muster-splitt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' fill='%231b273f'%3E%3Ccircle cx='62.3' cy='61.7' r='1'/%3E%3Ccircle cx='32.5' cy='61.6' r='1'/%3E%3Ccircle cx='13.3' cy='36.9' r='0.7'/%3E%3Ccircle cx='44.2' cy='13.4' r='1.4'/%3E%3Ccircle cx='21.8' cy='6.5' r='1'/%3E%3Ccircle cx='45.7' cy='42.9' r='1.4'/%3E%3Ccircle cx='69.5' cy='47.1' r='1'/%3E%3Ccircle cx='4.5' cy='2.6' r='1.2'/%3E%3Ccircle cx='43.2' cy='56.0' r='0.7'/%3E%3Ccircle cx='16.8' cy='21.2' r='1.2'/%3E%3Ccircle cx='47.7' cy='32.9' r='0.55'/%3E%3Ccircle cx='29.3' cy='39.7' r='0.85'/%3E%3Ccircle cx='51.0' cy='22.7' r='0.55'/%3E%3Ccircle cx='36.9' cy='2.1' r='0.7'/%3E%3Ccircle cx='55.2' cy='28.8' r='1.2'/%3E%3Ccircle cx='27.8' cy='69.0' r='0.85'/%3E%3Ccircle cx='0.0' cy='15.1' r='1.4'/%3E%3Ccircle cx='72.0' cy='15.1' r='1.4'/%3E%3Ccircle cx='33.8' cy='70.6' r='0.55'/%3E%3Ccircle cx='56.1' cy='19.4' r='0.7'/%3E%3Ccircle cx='22.4' cy='1.1' r='0.55'/%3E%3Ccircle cx='54.6' cy='8.5' r='1'/%3E%3Ccircle cx='50.9' cy='0.8' r='0.7'/%3E%3Ccircle cx='57.4' cy='12.8' r='1'/%3E%3Ccircle cx='8.4' cy='30.3' r='1'/%3E%3Ccircle cx='0.0' cy='62.2' r='0.7'/%3E%3Ccircle cx='72.0' cy='62.2' r='0.7'/%3E%3Ccircle cx='21.9' cy='63.7' r='1.2'/%3E%3Ccircle cx='13.5' cy='71.7' r='0.7'/%3E%3Ccircle cx='13.5' cy='-0.3' r='0.7'/%3E%3Ccircle cx='46.2' cy='7.2' r='1.2'/%3E%3Ccircle cx='23.7' cy='21.3' r='1.2'/%3E%3Ccircle cx='5.3' cy='15.0' r='0.55'/%3E%3Ccircle cx='17.5' cy='43.3' r='1.4'/%3E%3Ccircle cx='34.8' cy='41.4' r='1.2'/%3E%3Ccircle cx='13.2' cy='11.1' r='1'/%3E%3Ccircle cx='58.9' cy='18.0' r='0.7'/%3E%3Ccircle cx='11.4' cy='45.3' r='0.7'/%3E%3Ccircle cx='43.5' cy='30.3' r='1'/%3E%3Ccircle cx='7.9' cy='36.9' r='0.55'/%3E%3Ccircle cx='17.2' cy='50.7' r='0.85'/%3E%3Ccircle cx='30.3' cy='65.1' r='0.85'/%3E%3Ccircle cx='21.1' cy='12.6' r='1'/%3E%3Ccircle cx='70.4' cy='9.1' r='1.4'/%3E%3Ccircle cx='40.3' cy='61.4' r='1'/%3E%3Ccircle cx='53.9' cy='5.0' r='0.7'/%3E%3Ccircle cx='32.1' cy='4.4' r='1'/%3E%3Ccircle cx='20.3' cy='38.2' r='0.7'/%3E%3Ccircle cx='6.6' cy='10.0' r='0.7'/%3E%3Ccircle cx='37.6' cy='68.2' r='1.4'/%3E%3Ccircle cx='50.5' cy='69.3' r='0.85'/%3E%3Ccircle cx='43.1' cy='5.4' r='0.55'/%3E%3Ccircle cx='5.4' cy='39.3' r='0.55'/%3E%3Ccircle cx='3.2' cy='67.4' r='1.4'/%3E%3Ccircle cx='50.7' cy='57.1' r='1.4'/%3E%3Ccircle cx='25.3' cy='49.3' r='0.85'/%3E%3Ccircle cx='62.7' cy='30.0' r='0.55'/%3E%3Ccircle cx='62.2' cy='41.2' r='0.55'/%3E%3Ccircle cx='47.7' cy='27.3' r='1.2'/%3E%3Ccircle cx='8.3' cy='18.5' r='1.4'/%3E%3Ccircle cx='60.4' cy='6.0' r='1'/%3E%3Ccircle cx='2.1' cy='43.3' r='1.2'/%3E%3Ccircle cx='18.4' cy='0.8' r='1'/%3E%3Ccircle cx='18.4' cy='72.8' r='1'/%3E%3Ccircle cx='12.2' cy='65.2' r='1.2'/%3E%3Ccircle cx='67.0' cy='35.9' r='1.4'/%3E%3Ccircle cx='66.3' cy='15.1' r='1.2'/%3E%3Ccircle cx='35.7' cy='60.3' r='0.7'/%3E%3Ccircle cx='51.0' cy='41.1' r='1.4'/%3E%3Ccircle cx='57.4' cy='70.8' r='0.7'/%3E%3Ccircle cx='32.1' cy='45.4' r='0.55'/%3E%3Ccircle cx='49.3' cy='14.4' r='0.55'/%3E%3Ccircle cx='19.6' cy='24.9' r='0.7'/%3E%3Ccircle cx='28.3' cy='57.0' r='0.7'/%3E%3Ccircle cx='27.9' cy='32.4' r='1.4'/%3E%3Ccircle cx='45.0' cy='65.5' r='0.7'/%3E%3Ccircle cx='39.6' cy='47.0' r='1'/%3E%3Ccircle cx='64.8' cy='70.6' r='0.7'/%3E%3Ccircle cx='38.7' cy='56.9' r='0.85'/%3E%3Ccircle cx='25.1' cy='6.0' r='0.55'/%3E%3Ccircle cx='24.1' cy='56.7' r='1.2'/%3E%3Ccircle cx='46.0' cy='37.6' r='1.2'/%3E%3Ccircle cx='15.0' cy='61.3' r='1.2'/%3E%3Ccircle cx='29.6' cy='8.2' r='0.7'/%3E%3Ccircle cx='43.6' cy='2.0' r='0.55'/%3E%3Ccircle cx='37.2' cy='28.8' r='0.55'/%3E%3Ccircle cx='8.8' cy='6.7' r='1.2'/%3E%3Ccircle cx='66.3' cy='57.6' r='1'/%3E%3Ccircle cx='19.4' cy='34.1' r='1'/%3E%3Ccircle cx='37.8' cy='7.8' r='1'/%3E%3Ccircle cx='14.0' cy='16.4' r='0.55'/%3E%3Ccircle cx='65.9' cy='45.2' r='0.7'/%3E%3Ccircle cx='65.0' cy='22.7' r='0.85'/%3E%3Ccircle cx='63.9' cy='9.6' r='0.7'/%3E%3Ccircle cx='7.0' cy='59.9' r='1'/%3E%3Ccircle cx='39.1' cy='50.7' r='1'/%3E%3Ccircle cx='29.0' cy='49.3' r='0.7'/%3E%3Ccircle cx='50.7' cy='45.7' r='0.55'/%3E%3Ccircle cx='57.8' cy='34.7' r='0.7'/%3E%3Ccircle cx='71.3' cy='66.7' r='0.7'/%3E%3Ccircle cx='-0.7' cy='66.7' r='0.7'/%3E%3Ccircle cx='41.7' cy='9.7' r='0.55'/%3E%3Ccircle cx='33.3' cy='55.1' r='1.4'/%3E%3Ccircle cx='13.1' cy='32.7' r='0.7'/%3E%3Ccircle cx='70.8' cy='57.9' r='1.2'/%3E%3Ccircle cx='56.0' cy='58.7' r='1.4'/%3E%3Ccircle cx='9.6' cy='23.8' r='1'/%3E%3Ccircle cx='0.8' cy='25.6' r='0.55'/%3E%3Ccircle cx='65.0' cy='3.6' r='1.4'/%3E%3Ccircle cx='15.6' cy='29.2' r='0.85'/%3E%3Ccircle cx='46.2' cy='50.5' r='1'/%3E%3Ccircle cx='70.6' cy='1.6' r='1'/%3E%3Ccircle cx='46.7' cy='0.8' r='0.7'/%3E%3Ccircle cx='18.1' cy='65.2' r='0.85'/%3E%3Ccircle cx='40.9' cy='71.6' r='1.2'/%3E%3Ccircle cx='40.9' cy='-0.4' r='1.2'/%3E%3Ccircle cx='34.0' cy='12.2' r='1'/%3E%3Ccircle cx='39.0' cy='43.0' r='1'/%3E%3Ccircle cx='68.1' cy='30.3' r='1'/%3E%3Ccircle cx='28.7' cy='22.5' r='1.2'/%3E%3Ccircle cx='20.6' cy='47.2' r='1.2'/%3E%3Ccircle cx='3.3' cy='7.1' r='0.7'/%3E%3Ccircle cx='25.7' cy='11.1' r='0.55'/%3E%3Ccircle cx='52.9' cy='17.2' r='0.85'/%3E%3Ccircle cx='36.2' cy='22.2' r='0.55'/%3E%3Ccircle cx='60.3' cy='55.4' r='1.2'/%3E%3Ccircle cx='30.6' cy='18.6' r='1'/%3E%3Ccircle cx='55.0' cy='23.6' r='1.4'/%3E%3Ccircle cx='15.8' cy='47.3' r='0.7'/%3E%3Ccircle cx='33.0' cy='15.9' r='0.85'/%3E%3Ccircle cx='59.7' cy='1.7' r='0.85'/%3E%3Ccircle cx='28.5' cy='27.9' r='1.4'/%3E%3Ccircle cx='15.9' cy='4.2' r='0.55'/%3E%3Ccircle cx='55.1' cy='37.6' r='1'/%3E%3Ccircle cx='23.1' cy='28.0' r='0.7'/%3E%3Ccircle cx='21.0' cy='69.8' r='1.2'/%3E%3Ccircle cx='46.7' cy='55.9' r='0.85'/%3E%3Ccircle cx='65.7' cy='54.2' r='0.7'/%3E%3Ccircle cx='42.1' cy='65.5' r='0.55'/%3E%3Ccircle cx='34.0' cy='36.6' r='1.4'/%3E%3Ccircle cx='65.6' cy='67.5' r='0.7'/%3E%3Ccircle cx='61.4' cy='34.9' r='1'/%3E%3Ccircle cx='28.8' cy='15.7' r='0.7'/%3E%3Ccircle cx='47.3' cy='17.1' r='0.55'/%3E%3Ccircle cx='62.9' cy='65.2' r='0.55'/%3E%3Ccircle cx='57.4' cy='51.4' r='1'/%3E%3Ccircle cx='9.4' cy='53.4' r='1.2'/%3E%3Ccircle cx='39.1' cy='36.4' r='1.2'/%3E%3Ccircle cx='2.7' cy='29.7' r='0.7'/%3E%3Ccircle cx='51.2' cy='34.2' r='1'/%3E%3Ccircle cx='40.6' cy='33.0' r='0.85'/%3E%3Ccircle cx='14.4' cy='52.7' r='0.7'/%3E%3Ccircle cx='59.4' cy='44.0' r='0.85'/%3E%3Ccircle cx='39.5' cy='25.4' r='0.85'/%3E%3Ccircle cx='71.0' cy='37.2' r='0.7'/%3E%3Ccircle cx='32.7' cy='29.0' r='0.55'/%3E%3Ccircle cx='65.7' cy='40.7' r='1.2'/%3E%3Ccircle cx='38.4' cy='17.0' r='0.7'/%3E%3Ccircle cx='46.8' cy='22.0' r='0.55'/%3E%3Ccircle cx='69.2' cy='19.7' r='0.85'/%3E%3Ccircle cx='20.5' cy='18.1' r='1.2'/%3E%3Ccircle cx='4.6' cy='55.9' r='0.7'/%3E%3Ccircle cx='23.1' cy='34.8' r='0.85'/%3E%3Ccircle cx='12.5' cy='56.1' r='1.2'/%3E%3Ccircle cx='62.8' cy='13.0' r='1'/%3E%3Ccircle cx='35.8' cy='47.4' r='0.7'/%3E%3Ccircle cx='33.6' cy='50.3' r='1'/%3E%3Ccircle cx='17.7' cy='57.1' r='0.85'/%3E%3Ccircle cx='27.8' cy='62.3' r='0.7'/%3E%3Ccircle cx='7.4' cy='26.7' r='0.7'/%3E%3Ccircle cx='68.8' cy='62.5' r='0.55'/%3E%3Ccircle cx='53.5' cy='65.3' r='0.55'/%3E%3Ccircle cx='21.6' cy='51.8' r='1.2'/%3E%3Ccircle cx='58.7' cy='63.9' r='0.85'/%3E%3Ccircle cx='2.2' cy='50.9' r='0.85'/%3E%3Ccircle cx='55.5' cy='45.2' r='0.7'/%3E%3Ccircle cx='19.9' cy='59.7' r='0.55'/%3E%3Ccircle cx='10.8' cy='13.9' r='0.55'/%3E%3Ccircle cx='63.7' cy='49.8' r='1.2'/%3E%3Ccircle cx='3.8' cy='18.3' r='1'/%3E%3Ccircle cx='53.2' cy='50.0' r='1.2'/%3E%3Ccircle cx='44.9' cy='59.8' r='0.7'/%3E%3Ccircle cx='41.0' cy='19.7' r='1.2'/%3E%3Ccircle cx='71.4' cy='29.4' r='0.7'/%3E%3Ccircle cx='-0.6' cy='29.4' r='0.7'/%3E%3Ccircle cx='4.5' cy='33.5' r='0.85'/%3E%3Ccircle cx='12.8' cy='7.6' r='0.7'/%3E%3Ccircle cx='4.7' cy='62.6' r='0.85'/%3E%3Ccircle cx='17.2' cy='7.7' r='1.4'/%3E%3Ccircle cx='8.4' cy='67.8' r='0.85'/%3E%3Ccircle cx='67.8' cy='24.9' r='0.55'/%3E%3Ccircle cx='24.0' cy='42.1' r='1'/%3E%3Ccircle cx='7.5' cy='47.3' r='1.2'/%3E%3Ccircle cx='48.1' cy='11.2' r='0.55'/%3E%3Ccircle cx='69.9' cy='70.3' r='0.55'/%3E%3Ccircle cx='25.4' cy='17.7' r='0.85'/%3E%3Ccircle cx='44.5' cy='69.4' r='1'/%3E%3Ccircle cx='11.8' cy='27.5' r='0.55'/%3E%3Ccircle cx='60.2' cy='68.9' r='0.55'/%3E%3Ccircle cx='55.1' cy='41.9' r='0.7'/%3E%3Ccircle cx='0.0' cy='4.9' r='0.55'/%3E%3Ccircle cx='72.0' cy='4.9' r='0.55'/%3E%3Ccircle cx='30.6' cy='11.4' r='0.55'/%3E%3Ccircle cx='70.8' cy='52.2' r='0.55'/%3E%3Ccircle cx='1.1' cy='21.9' r='0.85'/%3E%3Ccircle cx='24.2' cy='61.1' r='0.55'/%3E%3Ccircle cx='10.3' cy='2.0' r='1.4'/%3E%3Ccircle cx='23.8' cy='66.8' r='0.55'/%3E%3Ccircle cx='38.0' cy='13.6' r='0.55'/%3E%3Ccircle cx='27.6' cy='53.5' r='0.55'/%3E%3Ccircle cx='60.5' cy='24.8' r='0.55'/%3E%3Ccircle cx='12.7' cy='19.6' r='1.2'/%3E%3Ccircle cx='33.7' cy='20.8' r='0.55'/%3E%3Ccircle cx='13.9' cy='24.2' r='0.55'/%3E%3Ccircle cx='53.3' cy='62.3' r='0.55'/%3E%3Ccircle cx='14.3' cy='40.1' r='0.85'/%3E%3Ccircle cx='8.2' cy='63.1' r='0.7'/%3E%3Ccircle cx='20.3' cy='3.5' r='0.55'/%3E%3Ccircle cx='33.4' cy='8.5' r='0.7'/%3E%3Ccircle cx='16.6' cy='17.5' r='0.55'/%3E%3Ccircle cx='70.2' cy='43.6' r='0.7'/%3E%3Ccircle cx='58.1' cy='9.0' r='0.55'/%3E%3Ccircle cx='49.0' cy='63.5' r='1.2'/%3E%3Ccircle cx='36.9' cy='54.1' r='0.55'/%3E%3Ccircle cx='71.3' cy='33.3' r='1.2'/%3E%3Ccircle cx='-0.7' cy='33.3' r='1.2'/%3E%3Ccircle cx='24.4' cy='70.4' r='0.55'/%3E%3Ccircle cx='11.5' cy='41.8' r='0.55'/%3E%3Ccircle cx='33.9' cy='24.9' r='0.7'/%3E%3Ccircle cx='35.5' cy='64.2' r='1'/%3E%3Ccircle cx='6.6' cy='71.1' r='0.7'/%3E%3Ccircle cx='4.0' cy='23.8' r='0.7'/%3E%3Ccircle cx='26.5' cy='0.9' r='0.85'/%3E%3Ccircle cx='43.8' cy='47.4' r='0.7'/%3E%3Ccircle cx='50.7' cy='53.4' r='0.55'/%3E%3Ccircle cx='35.3' cy='31.6' r='0.55'/%3E%3Ccircle cx='60.7' cy='22.0' r='0.55'/%3E%3Ccircle cx='26.0' cy='38.5' r='0.85'/%3E%3Ccircle cx='42.2' cy='52.2' r='0.55'/%3E%3Ccircle cx='43.8' cy='24.2' r='0.7'/%3E%3Ccircle cx='2.6' cy='11.7' r='0.85'/%3E%3Ccircle cx='49.4' cy='4.1' r='0.55'/%3E%3Ccircle cx='10.4' cy='60.7' r='0.7'/%3E%3Ccircle cx='2.9' cy='59.5' r='0.7'/%3E%3Ccircle cx='20.1' cy='28.8' r='0.55'/%3E%3Ccircle cx='51.9' cy='12.1' r='0.7'/%3E%3Ccircle cx='64.7' cy='19.2' r='0.55'/%3E%3Ccircle cx='54.5' cy='69.6' r='0.55'/%3E%3Ccircle cx='54.1' cy='54.8' r='0.7'/%3E%3Ccircle cx='27.7' cy='44.7' r='0.55'/%3E%3Ccircle cx='7.2' cy='41.5' r='0.55'/%3E%3Ccircle cx='66.3' cy='64.3' r='0.7'/%3E%3Ccircle cx='24.9' cy='25.5' r='0.7'/%3E%3Ccircle cx='8.3' cy='56.9' r='0.55'/%3E%3Ccircle cx='16.7' cy='14.5' r='0.55'/%3E%3Ccircle cx='30.6' cy='0.3' r='0.85'/%3E%3Ccircle cx='30.6' cy='72.3' r='0.85'/%3E%3Ccircle cx='57.1' cy='66.9' r='0.7'/%3E%3Ccircle cx='58.6' cy='39.0' r='0.85'/%3E%3Ccircle cx='49.8' cy='7.2' r='0.55'/%3E%3Ccircle cx='28.7' cy='36.2' r='0.7'/%3E%3Ccircle cx='58.4' cy='27.0' r='0.7'/%3E%3Ccircle cx='11.5' cy='49.1' r='1.2'/%3E%3Ccircle cx='66.7' cy='11.1' r='0.55'/%3E%3Ccircle cx='51.1' cy='29.1' r='0.55'/%3E%3Ccircle cx='47.7' cy='47.0' r='0.7'/%3E%3Ccircle cx='68.8' cy='5.8' r='0.55'/%3E%3Ccircle cx='10.0' cy='34.5' r='0.85'/%3E%3Ccircle cx='0.7' cy='48.1' r='0.55'/%3E%3Ccircle cx='54.8' cy='33.4' r='0.55'/%3E%3Ccircle cx='15.3' cy='68.4' r='1'/%3E%3Ccircle cx='30.5' cy='51.9' r='0.55'/%3E%3C/svg%3E");
  --muster-schotter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='150'%3E%3Cg stroke='%231b273f' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath d='M213.1 59.4 212.2 62.1 208.3 63.2 205.9 61.7 204.7 58.6 205.9 56.3 211.4 56.1z' fill='none'/%3E%3Cpath d='M17.1 78.1 18.2 79.4 18.0 81.3 15.9 82.7 13.8 82.2 13.1 79.4 14.8 78.2z' fill='none'/%3E%3Cpath d='M125.0 139.2 124.2 135.2 126.4 133.0 130.5 132.9 132.4 136.5 129.1 139.6z' fill='%23d3d8e0'/%3E%3Cpath d='M11.0 63.4 11.4 65.2 9.9 68.1 6.6 67.5 4.7 63.5 7.5 62.0z' fill='none'/%3E%3Cpath d='M50.7 81.1 53.9 79.9 55.7 82.0 53.5 85.1 51.3 84.6z' fill='none'/%3E%3Cpath d='M182.6 16.3 185.0 18.4 184.1 19.5 181.3 20.4 179.5 18.5 180.1 16.8z' fill='none'/%3E%3Cpath d='M141.1 90.2 138.7 90.5 135.3 87.5 136.6 85.8 140.8 84.8 141.9 86.4z' fill='%23d3d8e0'/%3E%3Cpath d='M124.6 59.4 126.9 56.5 129.5 58.1 129.9 59.7 128.2 61.5 125.0 61.1z' fill='none'/%3E%3Cpath d='M14.0 128.1 12.4 131.2 9.0 131.9 6.2 128.7 8.8 125.8 12.4 126.9z' fill='none'/%3E%3Cpath d='M96.2 80.8 96.7 82.3 91.8 84.5 87.5 82.6 88.8 78.7 91.4 76.8z' fill='%23d3d8e0'/%3E%3Cpath d='M73.8 118.6 74.0 121.8 69.8 127.1 65.9 126.4 61.4 123.4 62.7 119.3 65.2 116.5z' fill='none'/%3E%3Cpath d='M126.0 90.3 127.2 91.8 125.3 95.2 122.9 94.8 121.5 93.2 123.2 90.4z' fill='none'/%3E%3Cpath d='M151.1 60.4 154.5 62.4 154.2 68.4 149.5 69.4 145.4 66.3 145.4 60.3z' fill='%23d3d8e0'/%3E%3Cpath d='M102.0 135.2 106.7 138.0 106.0 141.0 100.3 142.6 98.2 137.0z' fill='none'/%3E%3Cpath d='M111.8 133.6 111.7 131.0 113.8 127.4 115.6 127.6 120.0 130.3 119.3 132.4 116.0 134.6z' fill='none'/%3E%3Cpath d='M26.1 65.5 23.9 64.4 23.0 62.6 24.3 60.4 26.5 60.2 28.2 61.9 28.5 64.1z' fill='none'/%3E%3Cpath d='M9.3 94.1 13.8 98.9 12.3 103.5 6.9 104.7 3.9 102.1 4.4 97.2z' fill='none'/%3E%3Cpath d='M181.7 141.9 182.2 140.1 185.1 139.3 186.5 140.3 187.5 141.7 186.7 143.7 183.8 143.9z' fill='none'/%3E%3Cpath d='M156.1 13.1 153.7 14.4 148.5 13.0 148.4 6.1 153.2 4.7 157.9 8.2z' fill='none'/%3E%3Cpath d='M160.2 93.6 162.7 99.4 151.3 103.5 147.3 100.0 149.9 93.1 153.1 89.5z' fill='%23d3d8e0'/%3E%3Cpath d='M189.3 41.1 182.3 48.3 176.4 46.9 175.7 39.0 183.6 37.0z' fill='none'/%3E%3Cpath d='M199.3 55.5 193.6 56.3 189.1 52.4 190.8 48.0 197.3 48.4 200.8 50.1z' fill='%23d3d8e0'/%3E%3Cpath d='M77.0 96.1 73.5 94.0 75.8 87.9 78.2 87.2 83.9 90.5 80.7 95.8z' fill='none'/%3E%3Cpath d='M17.3 111.3 17.4 116.2 13.2 119.7 9.5 119.5 8.2 115.1 13.4 111.2z' fill='none'/%3E%3Cpath d='M165.9 58.7 165.5 61.4 160.6 62.9 159.4 61.2 159.0 58.2 163.5 57.1z' fill='none'/%3E%3Cpath d='M113.0 18.6 117.3 27.5 112.9 32.1 102.4 29.5 102.2 22.1 104.8 17.8z' fill='none'/%3E%3Cpath d='M100.0 53.1 95.5 60.5 87.5 60.1 82.9 54.6 87.5 48.0 95.2 48.7z' fill='none'/%3E%3Cpath d='M206.5 20.7 212.8 19.4 216.0 23.8 212.0 26.2 206.3 26.5z' fill='none'/%3E%3Cpath d='M31.9 101.4 29.8 99.2 31.5 95.7 36.5 97.2 37.1 99.5z' fill='none'/%3E%3Cpath d='M106.5 85.5 109.4 87.0 108.7 89.6 106.8 90.7 105.1 90.2 104.5 86.2z' fill='%23d3d8e0'/%3E%3Cpath d='M66.2 22.1 62.8 25.6 59.1 24.8 59.1 19.6 62.7 18.1z' fill='%23d3d8e0'/%3E%3Cpath d='M148.4 76.6 151.3 74.9 154.0 74.9 154.6 78.7 151.6 80.9z' fill='none'/%3E%3Cpath d='M194.0 120.4 193.6 115.6 196.2 112.3 202.7 116.0 202.2 121.0z' fill='none'/%3E%3Cpath d='M85.4 10.1 90.2 12.2 93.2 15.4 90.2 19.2 85.8 19.2 82.9 17.1z' fill='none'/%3E%3Cpath d='M16.9 4.0 12.0 6.4 5.8 2.5 4.9 -0.3 10.3 -4.8 17.7 -2.3z' fill='%23d3d8e0'/%3E%3Cpath d='M16.9 154.0 12.0 156.4 5.8 152.5 4.9 149.7 10.3 145.2 17.7 147.7z' fill='%23d3d8e0'/%3E%3Cpath d='M114.4 143.6 115.0 140.5 118.4 139.0 120.9 140.3 120.9 144.6 118.8 145.6z' fill='none'/%3E%3Cpath d='M128.2 69.3 133.4 67.4 136.4 69.3 136.6 72.2 131.6 74.9 128.0 73.3z' fill='none'/%3E%3Cpath d='M25.8 49.3 25.4 52.4 22.0 54.7 20.4 53.8 18.6 51.1 21.2 48.1z' fill='none'/%3E%3Cpath d='M105.9 107.7 100.4 105.3 102.0 101.7 104.0 99.3 108.8 101.5 110.4 104.2z' fill='%23d3d8e0'/%3E%3Cpath d='M169.1 45.1 167.1 47.3 165.4 47.4 163.8 44.7 165.2 42.1 166.6 42.7 169.4 44.3z' fill='none'/%3E%3Cpath d='M169.8 76.2 173.5 77.8 173.1 82.3 167.4 82.6 165.7 79.1z' fill='none'/%3E%3Cpath d='M52.7 35.7 45.5 42.3 35.5 41.6 37.4 27.4 45.2 28.2z' fill='none'/%3E%3Cpath d='M159.9 37.7 157.6 33.6 163.4 30.2 167.6 30.9 165.9 38.2z' fill='none'/%3E%3Cpath d='M152.0 139.7 155.3 141.9 155.7 145.0 149.8 146.0 149.3 143.7z' fill='%23d3d8e0'/%3E%3Cpath d='M181.0 104.8 182.3 107.9 180.5 112.2 174.5 111.8 173.3 107.3 175.0 105.6z' fill='%23d3d8e0'/%3E%3Cpath d='M40.8 93.5 44.1 90.7 48.2 90.6 48.4 94.8 44.1 98.0z' fill='none'/%3E%3Cpath d='M185.7 76.9 180.5 74.9 178.3 70.2 183.9 65.7 189.9 67.0 189.3 75.2z' fill='none'/%3E%3Cpath d='M93.0 92.9 95.8 92.8 98.1 94.0 98.2 97.9 94.7 98.4 92.3 96.5z' fill='none'/%3E%3Cpath d='M173.1 146.2 174.5 143.8 178.1 143.6 178.3 147.0 175.0 148.5z' fill='none'/%3E%3Cpath d='M35.9 86.0 29.5 84.1 29.4 81.2 32.9 77.7 37.3 80.1 38.6 83.7z' fill='%23d3d8e0'/%3E%3Cpath d='M67.9 35.5 65.3 39.0 62.9 38.4 61.5 34.9 65.1 33.5z' fill='none'/%3E%3Cpath d='M38.8 134.9 34.2 141.3 30.1 143.9 24.8 146.0 21.1 137.0 23.6 131.0 31.3 131.1z' fill='none'/%3E%3Cpath d='M193.9 101.5 192.8 97.8 199.5 96.2 202.0 100.5 199.0 103.9z' fill='none'/%3E%3Cpath d='M25.5 28.8 23.7 19.8 30.4 18.4 33.7 20.1 32.8 26.5z' fill='none'/%3E%3Cpath d='M137.7 117.6 132.5 119.8 131.5 118.0 132.7 113.8 136.5 114.3z' fill='%23d3d8e0'/%3E%3Cpath d='M34.6 69.1 38.5 68.1 41.0 68.8 41.4 71.5 39.1 73.4 35.6 72.4z' fill='none'/%3E%3Cpath d='M170.5 136.6 168.8 138.3 165.5 139.0 164.4 137.9 164.7 134.8 167.7 134.6z' fill='none'/%3E%3Cpath d='M77.1 144.9 73.8 149.4 71.6 150.7 67.2 147.9 68.2 143.2 72.2 141.6z' fill='none'/%3E%3Cpath d='M77.1 -5.1 73.8 -0.6 71.6 0.7 67.2 -2.1 68.2 -6.8 72.2 -8.4z' fill='none'/%3E%3Cpath d='M198.8 132.6 200.4 130.7 205.1 129.9 206.9 132.0 206.0 136.8 203.3 137.3 199.4 136.6z' fill='%23d3d8e0'/%3E%3Cpath d='M90.9 2.4 92.2 -0.5 99.4 -2.3 103.0 1.3 99.1 7.2 96.8 7.0z' fill='none'/%3E%3Cpath d='M90.9 152.4 92.2 149.5 99.4 147.7 103.0 151.3 99.1 157.2 96.8 157.0z' fill='none'/%3E%3Cpath d='M118.5 42.4 117.3 46.5 111.6 47.5 108.9 44.5 110.7 42.0 116.3 40.5z' fill='%23d3d8e0'/%3E%3Cpath d='M64.2 133.7 64.0 138.0 60.0 140.2 54.8 137.0 56.2 133.2 59.0 132.2z' fill='none'/%3E%3Cpath d='M133.0 36.0 131.3 33.3 132.4 31.7 136.0 32.0 136.2 34.6z' fill='none'/%3E%3Cpath d='M135.3 11.2 133.4 8.3 133.0 4.6 138.9 3.1 140.3 5.1 140.0 9.0z' fill='%23d3d8e0'/%3E%3Cpath d='M62.6 78.0 59.7 75.4 61.1 74.0 63.1 71.9 66.6 73.4 66.8 76.5 65.0 78.6z' fill='none'/%3E%3Cpath d='M56.0 72.4 50.5 69.8 50.3 64.7 54.2 62.4 58.2 64.6 59.8 69.2z' fill='none'/%3E%3Cpath d='M212.2 124.4 214.0 121.3 219.9 122.7 219.5 127.2 217.0 129.3 214.1 129.5 212.1 125.5z' fill='none'/%3E%3Cpath d='M-7.8 124.4 -6.0 121.3 -0.1 122.7 -0.5 127.2 -3.0 129.3 -5.9 129.5 -7.9 125.5z' fill='none'/%3E%3Cpath d='M213.3 83.6 220.1 86.9 220.2 93.0 210.7 94.5 207.1 93.3 206.6 84.8z' fill='none'/%3E%3Cpath d='M-6.7 83.6 0.1 86.9 0.2 93.0 -9.3 94.5 -12.9 93.3 -13.4 84.8z' fill='none'/%3E%3Cpath d='M59.0 -3.4 62.0 -1.5 62.4 2.1 60.0 3.9 56.6 3.0 56.1 -0.5z' fill='none'/%3E%3Cpath d='M59.0 146.6 62.0 148.5 62.4 152.1 60.0 153.9 56.6 153.0 56.1 149.5z' fill='none'/%3E%3Cpath d='M209.8 150.6 207.7 145.3 209.2 141.9 212.1 142.3 214.3 143.4 215.3 147.1 213.8 149.2z' fill='none'/%3E%3Cpath d='M209.8 0.6 207.7 -4.7 209.2 -8.1 212.1 -7.7 214.3 -6.6 215.3 -2.9 213.8 -0.8z' fill='none'/%3E%3Cpath d='M88.7 70.6 85.5 74.8 82.6 75.0 79.7 70.8 82.0 68.0 86.4 66.9z' fill='none'/%3E%3Cpath d='M-6.6 45.7 -7.8 38.5 -1.5 33.4 5.6 33.0 8.5 38.7 8.4 41.4 3.2 46.5z' fill='none'/%3E%3Cpath d='M213.4 45.7 212.2 38.5 218.5 33.4 225.6 33.0 228.5 38.7 228.4 41.4 223.2 46.5z' fill='none'/%3E%3Cpath d='M62.0 89.7 65.1 90.2 65.4 93.2 65.4 94.9 63.1 95.6 60.0 95.6 59.6 92.1z' fill='none'/%3E%3Cpath d='M196.9 18.9 191.3 15.2 191.3 10.9 196.9 7.3 203.1 13.0 202.7 17.3z' fill='none'/%3E%3Cpath d='M181.7 123.9 181.6 128.3 180.8 131.1 176.0 130.8 173.4 127.0 175.1 124.5 176.9 122.8z' fill='%23d3d8e0'/%3E%3Cpath d='M103.9 71.8 105.7 70.9 108.4 71.4 108.6 73.4 105.9 75.1 104.3 74.6z' fill='none'/%3E%3Cpath d='M89.1 136.7 87.8 140.6 83.5 140.5 80.9 138.7 82.3 135.1 87.0 133.5z' fill='none'/%3E%3Cpath d='M17.3 10.3 19.2 12.7 20.4 13.8 17.6 16.3 14.4 15.4 12.8 13.5 12.9 12.0z' fill='none'/%3E%3Cpath d='M169.0 124.6 168.4 128.0 164.6 129.9 160.6 126.7 161.0 124.4 165.9 122.5z' fill='none'/%3E%3Cpath d='M136.2 24.9 134.6 21.9 138.6 18.9 141.1 18.9 143.6 20.6 142.4 24.7 139.8 25.8z' fill='none'/%3E%3Cpath d='M181.0 93.8 180.8 96.1 179.2 97.7 176.6 96.6 175.6 94.5 176.3 93.2 179.9 92.5z' fill='none'/%3E%3Cpath d='M117.7 103.5 124.8 105.2 126.2 108.2 125.6 112.1 115.8 111.7 114.9 106.2z' fill='none'/%3E%3Cpath d='M71.5 12.1 75.8 11.0 78.6 13.0 77.0 16.3 74.4 16.3z' fill='none'/%3E%3Cpath d='M77.8 123.3 77.6 120.2 80.7 119.0 85.1 121.4 83.0 124.1 80.3 123.7z' fill='none'/%3E%3Cpath d='M209.9 107.9 209.5 110.1 206.2 110.3 204.2 108.0 205.4 106.4 207.8 105.4z' fill='none'/%3E%3Cpath d='M120.0 3.5 123.2 3.8 124.0 6.8 120.0 8.3 118.1 5.3z' fill='none'/%3E%3Cpath d='M142.2 42.5 144.4 44.2 144.1 47.8 140.0 47.3 139.4 46.0z' fill='%23d3d8e0'/%3E%3Cpath d='M85.3 36.7 82.6 35.0 82.6 31.9 83.3 30.5 88.0 31.3 89.3 33.2 88.8 35.4z' fill='none'/%3E%3Cpath d='M153.1 41.3 159.8 43.7 159.8 48.8 153.5 50.2 149.0 45.4z' fill='none'/%3E%3Cpath d='M100.4 37.5 103.2 36.5 106.0 40.1 105.2 42.0 100.3 42.3 98.7 39.9z' fill='%23d3d8e0'/%3E%3Cpath d='M69.9 29.7 70.1 26.0 74.4 25.3 75.5 27.9 74.0 30.4z' fill='none'/%3E%3Cpath d='M63.9 50.6 63.8 53.1 63.1 55.1 59.3 54.1 58.5 51.6 60.6 50.7z' fill='%23d3d8e0'/%3E%3Cpath d='M47.5 57.0 42.7 59.7 38.3 57.2 38.3 52.5 39.6 49.6 46.9 51.5z' fill='none'/%3E%3Cpath d='M59.7 112.6 56.7 114.5 53.9 111.7 55.3 110.2 58.1 110.2z' fill='%23d3d8e0'/%3E%3Cpath d='M2.6 143.4 -1.7 140.6 -1.1 139.1 0.8 136.9 3.0 136.6 5.9 139.7 5.0 142.1z' fill='none'/%3E%3Cpath d='M222.6 143.4 218.3 140.6 218.9 139.1 220.8 136.9 223.0 136.6 225.9 139.7 225.0 142.1z' fill='none'/%3E%3Cpath d='M114.5 60.0 111.9 61.2 109.5 58.7 110.9 56.9 113.4 56.4 116.0 58.7z' fill='none'/%3E%3Cpath d='M51.2 11.8 50.9 8.9 54.1 6.5 57.1 7.2 57.0 12.1 54.1 12.5z' fill='none'/%3E%3Cpath d='M142.0 99.4 138.7 104.7 132.3 103.1 133.5 97.8 137.6 97.1z' fill='%23d3d8e0'/%3E%3Cpath d='M190.8 86.8 192.1 83.0 196.7 83.8 199.1 85.8 197.5 89.6 193.3 90.1z' fill='none'/%3E%3Cpath d='M19.7 70.8 22.2 68.7 24.1 69.5 25.7 71.0 22.6 73.5 19.9 73.1z' fill='%23d3d8e0'/%3E%3Cpath d='M21.1 91.1 20.6 88.1 25.2 87.7 25.5 90.4 23.9 91.3z' fill='none'/%3E%3Cpath d='M66.7 86.0 65.9 83.6 69.4 82.1 71.2 84.4 71.4 85.6 68.2 87.3z' fill='none'/%3E%3Cpath d='M217.2 71.1 217.2 73.7 215.8 74.2 212.0 73.9 211.4 71.8 213.6 70.2z' fill='none'/%3E%3Cpath d='M211.4 4.5 215.7 4.7 217.1 11.0 212.6 12.6 210.1 10.7 209.0 7.7z' fill='none'/%3E%3Cpath d='M111.9 98.8 110.0 96.6 112.8 92.9 114.5 93.5 117.3 96.8 115.3 98.8z' fill='none'/%3E%3Cpath d='M28.9 6.7 28.7 3.0 32.4 0.5 35.6 3.7 34.9 5.1 31.8 6.7z' fill='none'/%3E%3Cpath d='M47.4 4.0 48.1 6.1 44.2 8.0 40.7 5.8 41.0 4.3 44.6 2.2z' fill='%23d3d8e0'/%3E%3Cpath d='M62.8 64.0 64.7 61.9 69.2 61.6 70.6 64.3 68.4 66.6 63.5 66.7z' fill='none'/%3E%3Cpath d='M128.3 23.1 124.0 21.3 123.5 19.2 126.4 15.9 130.1 16.2 132.4 18.0 132.0 20.5z' fill='%23d3d8e0'/%3E%3Cpath d='M147.3 119.3 146.4 120.8 142.0 121.7 140.7 118.3 141.7 116.3 146.0 116.5z' fill='%23d3d8e0'/%3E%3Cpath d='M41.5 110.2 37.2 108.0 38.6 104.4 45.1 103.6 46.7 106.8z' fill='none'/%3E%3Cpath d='M30.9 122.8 28.9 118.9 30.6 116.8 34.6 117.6 33.5 122.3z' fill='none'/%3E%3Cpath d='M128.7 44.9 131.9 42.8 134.8 44.7 135.6 46.7 133.1 49.1 132.1 49.1 129.3 48.4z' fill='none'/%3E%3Cpath d='M205.9 75.0 203.2 76.4 199.9 75.0 200.4 72.8 202.6 71.4 206.3 73.8z' fill='%23d3d8e0'/%3E%3Cpath d='M78.0 76.2 78.3 78.7 77.9 79.8 75.0 80.6 72.7 78.8 73.8 76.6 75.5 75.5z' fill='none'/%3E%3Cpath d='M85.1 111.1 85.4 105.3 94.0 104.1 96.0 109.6 90.2 114.9z' fill='none'/%3E%3Cpath d='M23.5 108.0 24.2 105.6 27.2 104.5 29.4 107.4 28.9 108.4 24.9 109.7z' fill='none'/%3E%3Cpath d='M171.5 21.8 164.5 20.6 161.1 19.0 165.3 12.3 167.5 10.7 173.7 15.5 172.2 19.4z' fill='%23d3d8e0'/%3E%3Cpath d='M134.2 129.9 131.8 128.4 133.4 125.4 135.5 124.2 137.7 125.2 139.1 128.8 136.3 130.4z' fill='none'/%3E%3Cpath d='M121.1 31.6 124.4 31.2 128.1 35.2 125.2 37.0 121.7 36.5z' fill='%23d3d8e0'/%3E%3Cpath d='M51.2 137.9 47.1 140.4 42.7 138.5 42.7 134.8 48.7 134.6z' fill='none'/%3E%3Cpath d='M151.0 21.9 154.6 24.9 152.2 27.9 148.8 27.3 148.2 23.5z' fill='none'/%3E%3Cpath d='M135.2 142.2 139.4 141.5 140.6 144.1 140.5 145.4 135.9 146.3 134.9 144.2z' fill='%23d3d8e0'/%3E%3Cpath d='M174.4 3.2 177.5 3.5 178.2 4.4 177.6 7.2 174.7 7.6 173.2 5.0z' fill='none'/%3E%3Cpath d='M45.8 120.1 47.8 120.5 49.3 123.7 47.8 125.2 46.2 125.6 44.5 124.2 43.7 122.2z' fill='none'/%3E%3Cpath d='M167.8 68.1 166.7 72.2 164.0 71.6 161.9 69.7 165.5 67.4z' fill='none'/%3E%3Cpath d='M117.0 77.4 121.4 78.5 123.6 84.4 118.9 87.3 116.0 85.4z' fill='none'/%3E%3Cpath d='M188.2 116.6 187.5 119.6 185.2 119.9 183.4 118.9 183.0 115.9 185.6 114.5z' fill='none'/%3E%3Cpath d='M68.3 53.4 70.4 52.0 73.0 52.4 73.8 54.3 72.7 55.9 70.2 56.5 68.9 55.9z' fill='%23d3d8e0'/%3E%3Cpath d='M5.7 74.4 9.1 75.4 9.9 76.1 9.1 78.4 5.7 79.0 5.0 76.6z' fill='none'/%3E%3Cpath d='M20.5 34.5 25.2 33.5 26.8 35.4 24.0 38.2 21.7 37.6z' fill='none'/%3E%3Cpath d='M107.0 116.0 108.9 116.5 110.0 119.4 109.1 121.4 105.7 120.4 104.3 117.8z' fill='%23d3d8e0'/%3E%3Cpath d='M66.2 109.7 63.1 106.5 66.2 103.2 69.8 103.7 70.4 108.4z' fill='%23d3d8e0'/%3E%3Cpath d='M190.8 130.8 193.7 131.3 194.8 132.6 194.8 134.7 192.2 135.7 189.9 134.5 189.7 132.4z' fill='none'/%3E%3Cpath d='M123.9 69.2 121.1 69.1 120.0 67.1 120.8 65.9 123.0 64.6 125.1 67.3z' fill='none'/%3E%3Cpath d='M143.1 130.2 146.3 128.4 150.8 132.5 147.9 135.7 143.4 134.2z' fill='none'/%3E%3Cpath d='M10.8 23.8 12.4 25.5 11.2 29.0 9.3 28.5 7.3 26.3 8.2 24.4z' fill='%23d3d8e0'/%3E%3Cpath d='M191.5 26.8 189.6 28.5 187.1 27.6 186.5 24.4 189.2 22.9 191.4 23.7 191.9 24.5z' fill='none'/%3E%3Cpath d='M181.9 7.2 185.0 5.7 186.5 7.4 186.3 9.3 184.4 11.4 183.4 11.0 181.5 9.8z' fill='%23d3d8e0'/%3E%3Cpath d='M198.6 152.2 197.0 148.0 201.1 147.3 203.6 149.8 202.3 152.6z' fill='none'/%3E%3Cpath d='M198.6 2.2 197.0 -2.0 201.1 -2.7 203.6 -0.2 202.3 2.6z' fill='none'/%3E%3Cpath d='M195.3 33.7 199.3 31.7 200.8 33.3 201.7 35.1 198.4 37.7 195.9 36.7 194.8 35.5z' fill='none'/%3E%3Cpath d='M154.9 136.3 154.5 133.4 156.1 132.0 159.5 133.3 159.7 135.1 156.2 136.6z' fill='%23d3d8e0'/%3E%3Cpath d='M93.8 31.7 91.2 30.5 91.3 27.7 93.9 26.7 95.3 27.0 96.4 29.6z' fill='none'/%3E%3Cpath d='M196.0 64.8 197.1 64.0 199.4 63.5 200.9 64.7 200.5 67.6 198.9 67.9 196.6 67.4z' fill='%23d3d8e0'/%3E%3Cpath d='M153.7 119.0 152.1 117.3 151.1 113.8 154.8 112.3 156.9 112.6 156.6 117.2z' fill='none'/%3E%3Cpath d='M93.6 126.1 93.9 122.7 95.9 120.8 99.0 121.8 100.3 122.9 99.2 127.2 95.6 128.0z' fill='none'/%3E%3Cpath d='M82.1 4.7 80.6 1.9 83.2 -1.3 86.5 0.3 85.7 3.6z' fill='none'/%3E%3Cpath d='M82.1 154.7 80.6 151.9 83.2 148.7 86.5 150.3 85.7 153.6z' fill='none'/%3E%3Cpath d='M101.4 63.4 100.1 62.5 102.4 59.2 104.2 59.6 105.8 60.9 104.9 63.4z' fill='%23d3d8e0'/%3E%3Cpath d='M80.5 104.9 78.4 106.6 76.3 106.0 74.8 103.7 76.6 102.1 79.7 102.8z' fill='none'/%3E%3Cpath d='M211.4 115.7 210.4 112.8 213.6 111.1 215.5 112.7 216.4 115.0 214.0 117.1z' fill='none'/%3E%3Cpath d='M44.0 20.8 45.2 16.6 47.2 17.3 49.2 19.3 46.7 22.0z' fill='%23d3d8e0'/%3E%3Cpath d='M172.1 100.5 166.8 101.2 166.8 98.1 169.4 95.1 173.2 98.0z' fill='none'/%3E%3Cpath d='M138.4 56.4 138.3 58.5 134.7 58.4 133.6 56.9 135.3 53.8 137.2 54.3z' fill='%23d3d8e0'/%3E%3Cpath d='M66.6 10.2 64.9 11.4 62.7 8.9 63.8 5.8 66.1 5.7 68.1 8.5z' fill='none'/%3E%3Cpath d='M80.5 39.7 78.1 44.3 74.5 44.9 71.7 41.3 76.8 37.6z' fill='%23d3d8e0'/%3E%3Cpath d='M185.0 97.9 185.2 95.0 187.9 94.4 189.5 94.4 190.3 96.8 187.3 98.6z' fill='%23d3d8e0'/%3E%3Cpath d='M0.7 10.3 3.2 8.5 5.7 9.3 5.2 11.7 3.9 13.7 2.6 13.4 0.0 11.5z' fill='none'/%3E%3Cpath d='M220.7 10.3 223.2 8.5 225.7 9.3 225.2 11.7 223.9 13.7 222.6 13.4 220.0 11.5z' fill='none'/%3E%3C/g%3E%3Cg fill='%231b273f'%3E%3Ccircle cx='161.6' cy='80.4' r='0.8'/%3E%3Ccircle cx='128.1' cy='5.4' r='0.6'/%3E%3Ccircle cx='15.6' cy='105.3' r='0.6'/%3E%3Ccircle cx='69.1' cy='21.9' r='0.6'/%3E%3Ccircle cx='207.7' cy='34.2' r='0.6'/%3E%3Ccircle cx='2.6' cy='60.3' r='1.0'/%3E%3Ccircle cx='87.0' cy='98.2' r='0.6'/%3E%3Ccircle cx='209.4' cy='68.6' r='1.0'/%3E%3Ccircle cx='121.0' cy='11.9' r='0.8'/%3E%3Ccircle cx='140.8' cy='148.9' r='0.8'/%3E%3Ccircle cx='145.2' cy='101.7' r='0.6'/%3E%3Ccircle cx='124.0' cy='128.3' r='0.6'/%3E%3Ccircle cx='188.4' cy='18.9' r='0.6'/%3E%3Ccircle cx='203.4' cy='123.0' r='1.0'/%3E%3Ccircle cx='152.5' cy='84.2' r='1.0'/%3E%3Ccircle cx='46.9' cy='130.3' r='0.6'/%3E%3Ccircle cx='36.2' cy='48.9' r='1.0'/%3E%3Ccircle cx='103.5' cy='130.7' r='1.0'/%3E%3Ccircle cx='162.6' cy='8.8' r='0.8'/%3E%3Ccircle cx='49.6' cy='109.6' r='1.0'/%3E%3Ccircle cx='19.3' cy='39.0' r='1.0'/%3E%3Ccircle cx='174.6' cy='33.5' r='1.0'/%3E%3Ccircle cx='217.6' cy='15.3' r='0.8'/%3E%3Ccircle cx='197.9' cy='127.4' r='0.8'/%3E%3Ccircle cx='139.6' cy='67.9' r='0.8'/%3E%3Ccircle cx='88.3' cy='25.7' r='0.6'/%3E%3Ccircle cx='191.0' cy='31.5' r='0.6'/%3E%3Ccircle cx='18.7' cy='65.7' r='0.6'/%3E%3Ccircle cx='109.8' cy='8.7' r='0.8'/%3E%3Ccircle cx='32.1' cy='105.1' r='0.8'/%3E%3Ccircle cx='76.0' cy='65.6' r='0.8'/%3E%3Ccircle cx='70.6' cy='68.4' r='0.6'/%3E%3Ccircle cx='21.3' cy='27.4' r='1.0'/%3E%3Ccircle cx='39.9' cy='98.3' r='1.0'/%3E%3Ccircle cx='219.6' cy='18.1' r='1.0'/%3E%3Ccircle cx='-0.4' cy='18.1' r='1.0'/%3E%3Ccircle cx='159.1' cy='19.3' r='1.0'/%3E%3Ccircle cx='33.3' cy='62.0' r='1.0'/%3E%3Ccircle cx='129.2' cy='7.0' r='0.8'/%3E%3Ccircle cx='63.7' cy='113.4' r='0.8'/%3E%3Ccircle cx='20.0' cy='30.0' r='0.8'/%3E%3Ccircle cx='98.5' cy='46.6' r='0.6'/%3E%3Ccircle cx='16.7' cy='131.0' r='0.6'/%3E%3Ccircle cx='170.9' cy='69.1' r='1.0'/%3E%3Ccircle cx='180.5' cy='32.4' r='0.6'/%3E%3Ccircle cx='13.1' cy='133.7' r='0.8'/%3E%3Ccircle cx='109.5' cy='127.3' r='1.0'/%3E%3Ccircle cx='218.7' cy='54.5' r='0.8'/%3E%3Ccircle cx='159.3' cy='109.0' r='1.0'/%3E%3Ccircle cx='153.1' cy='30.3' r='1.0'/%3E%3Ccircle cx='65.7' cy='55.1' r='0.8'/%3E%3Ccircle cx='181.3' cy='2.7' r='0.8'/%3E%3Ccircle cx='80.8' cy='50.9' r='0.8'/%3E%3Ccircle cx='53.6' cy='122.0' r='0.8'/%3E%3Ccircle cx='9.9' cy='13.6' r='1.0'/%3E%3C/g%3E%3C/svg%3E");
  --muster-boden:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M-1 15L15-1' stroke='%235f6878' stroke-width='1'/%3E%3C/svg%3E");
}
/* Registriert, damit "Fugen einkehren" weich von Tusche nach Markierung laeuft; gelesen immer mit Ersatzwert */
@property --fugenfarbe{syntax:"<color>"; inherits:true; initial-value:#ee7400}
.schnitt{--steine:6; position:relative; display:flex; flex-direction:column; border-top:2px solid var(--tusche)}
@media (min-width:30.0625em){.schnitt{--steine:10}}
@media (min-width:61.3125em){.schnitt{--steine:16}}
.schicht{position:relative; flex:none}
.schicht::before{content:""; position:absolute; inset:0; -webkit-print-color-adjust:exact; print-color-adjust:exact}
.schicht + .schicht{border-top:1.5px solid var(--tusche)}
.stein{height:calc(var(--s) * 8)}
/* 20 und 10 cm lange Steine mit Fase, in den 4-mm-Fugen scheint die Fugenfarbe durch */
.stein::before{background:var(--muster-stein) 0 0/calc(var(--s) * 30) 100%,var(--fugenfarbe,#ee7400)}
.splitt{height:calc(var(--s) * 4.5)}
.splitt::before{background:var(--muster-splitt) 0 0/72px 72px,var(--papier)}
.schotter{height:calc(var(--s) * 25)}
.schotter::before{background:var(--muster-schotter) 0 0/220px 150px,var(--papier)}
.boden{height:calc(var(--s) * 5)}
.boden::before{background:var(--muster-boden) 0 0/14px 14px,var(--papier)}
/* Beschriftung freigestellt wie in einer Zeichnung: links die Masskette, rechts der Baustoff, buendig mit der Spalte */
.schicht > span{position:absolute; z-index:1; top:50%; translate:0 -50%; white-space:nowrap; line-height:1;
  background:var(--papier); color:var(--tusche); -webkit-print-color-adjust:exact; print-color-adjust:exact}
.schnitt .stein > span{background:var(--tusche); color:var(--papier)}
/* Hoechstens so hoch wie der Splitt (4,5 cm), sonst deckt das Schild dessen Linien zu. Mindestens .8125rem: Mit
   grosser Grundschrift oder Zoom waechst das Schild mit und deckt die Linien dann eben. */
.schild{right:max(var(--gutter),calc((100% - var(--w-max)) / 2 + var(--gutter))); padding:.2em .45em;
  font-weight:700; font-size:max(.8125rem,min(clamp(.8125rem,.72rem + .3vw,1rem),calc(var(--s) * 4.5 - 2px)))}
.mass{left:max(var(--gutter),calc((100% - var(--w-max)) / 2 + var(--gutter))); padding:0 .3em;
  font-family:var(--f-eng); font-weight:700; font-size:max(.8125rem,min(clamp(1rem,.85rem + .45vw,1.375rem),calc(var(--s) * 4.5 - 2px)))}
.schnitt .splitt > span{padding-block:0}
/* Masslinie der Kette: links neben den Zahlen durch Stein, Splitt und Schotter; die Schichtlinien sind ihre Hilfslinien.
   Auf dem Stein in Papier, sonst Tusche auf Tusche. Die Schichten selbst teilt sich das Band mit der Signatur. */
.schnitt .stein::after,.schnitt .splitt::after,.schnitt .schotter::after{content:""; position:absolute; top:0; bottom:0; width:1.5px;
  left:calc(max(var(--gutter),calc((100% - var(--w-max)) / 2 + var(--gutter))) - 8px); background:var(--tusche);
  -webkit-print-color-adjust:exact; print-color-adjust:exact}
.schnitt .stein::after{background:var(--papier)}
/* Lade-Auftakt, einmal, 1,4 s: Schotter zieht von unten auf, Splitt wird abgezogen, Steine werden
   von links verlegt, zuletzt werden die Fugen eingekehrt. Nur mit JS und ohne "Bewegung reduzieren", sonst fertig. */
/* Ziel ausdruecklich inset(0): Von inset() nach none laesst sich nicht ueberblenden, der Browser springt dann auf
   halber Strecke (gemessen 16.10.2026) */
@keyframes aufziehen{from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0)}}
@keyframes vonlinks{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0)}}
/* Vor dem Einkehren sind die Fugen leer, man sieht das helle Splittbett: So ist beim Verlegen jeder Stein zu erkennen */
@keyframes einkehren{from{--fugenfarbe:#edeeec}}
@media (prefers-reduced-motion:no-preference){
  /* backwards statt both: Nach dem Auftakt gilt wieder clip-path:none, ein groesseres Schild bleibt nicht in seiner
     Schicht gefangen */
  html.js .schnitt .schotter{animation:aufziehen .4s .05s var(--ease-out) backwards}
  html.js .schnitt .splitt{animation:vonlinks .3s .4s cubic-bezier(.65,0,.35,1) backwards}
  html.js .schnitt .stein{animation:vonlinks .45s .65s steps(var(--steine),jump-end) backwards,einkehren .3s 1.1s ease-out backwards}
}

/* ---------- Planblatt: Ablauf, Leistungen, Projekte, Ueber uns, Rezensionen, Einsatzgebiet, FAQ, Kontakt ---------- */
/* Jedes Blatt: links die Aussage (Ueberschrift, zwei, drei Saetze, eine Handlung), rechts der Beleg, am Rechner 5 zu 7; am
   Handy steht die Aussage zuerst. Flaechenwechsel nur Papier gegen Splitt, zwischen zwei Papier-Blaettern eine gerade Kante. */
/* break-word: Ohne Trennwoerterbuch (manche Browser, Testbrowser) liefe "Machbarkeitseinschaetzung" bei 32 px Grundschrift
   sonst ueber den Rand; mit Woerterbuch trennt hyphens:auto vorher */
.ab,.lv,.prj,.peer,.rz,.ein,.fq,.kt{padding-block:var(--sect-pad); overflow-wrap:break-word}
.prj,.peer,.rz,.ein{border-top:1px solid var(--bleistift)}
.blatt__lead{max-width:var(--w-text); margin-top:var(--sp-4)}
.blatt__cta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-6); margin-top:var(--sp-5)}
/* Textlink wie "Zum Rechner" und "Aufbau ueberspringen": Rost mit 2-px-Unterstrich, 44 px hoch */
.blatt__link{display:inline-flex; align-items:center; min-height:44px; font-weight:700; color:var(--rost);
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px}
/* Unterzeile in der Ueberschrift wie im ersten Bildschirm: Der Zusatz steht unmittelbar an der Aussage */
.h2__zusatz{display:block; margin-top:.5em; font-family:var(--f-text); font-weight:700; letter-spacing:0;
  font-size:clamp(1.125rem,.95rem + .6vw,1.5rem); line-height:1.3}
/* Nur am Bildschirm: Im Druck stehen die Blaetter einspaltig. Firefox teilt Bloecke in Rasterzellen trotz break-inside
   ueber den Blattrand (quer gemessen: Schritt 01 des Ablaufs, die 1 stand allein oben auf dem naechsten Blatt). */
@media screen and (min-width:61.3125em){
  .blatt{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(32px,4vw,64px); align-items:start}
}

/* ---------- FAQ: Wechselflaeche Splitt (Links dort in Rost tief), sechs Fragen ----------
   Natives details: offen ohne JS, Tastatur und Suche im Browser. Oeffnet ohne Uebergang, Text bewegt sich nie: darum ohne
   name="faq", das exklusive Akkordeon liess die angeklickte Frage um die Hoehe der zuklappenden Antwort springen. */
.fq{background:var(--splitt)}
/* Fugenkante: Die Flaeche beginnt mit einer Reihe Steine aus dem Band (20 und 10 cm, Fugen in Markierung). Sie laeuft beim Scrollen eine
   Steinlaenge mit, nichts zieht sich. Ohne Zeitachse, ohne Skript, bei "Bewegung reduzieren" und im Druck bleibt die gerade Kante. */
@supports (animation-timeline:view()){
  @media screen and (prefers-reduced-motion:no-preference){
    html.js .fq{position:relative; overflow-x:clip}
    html.js .fq::before{--lauf:60px; content:""; position:absolute; top:0; left:0; right:calc(var(--lauf) * -1); height:12px;
      background:repeating-linear-gradient(90deg,var(--tusche) 0 38px,var(--markierung) 38px 40px,var(--tusche) 40px 58px,var(--markierung) 58px 60px);
      animation:fugenkante linear both; animation-timeline:view(block 0px)}
  }
}
@keyframes fugenkante{to{transform:translateX(calc(var(--lauf) * -1))}}
.fq__end a{color:var(--rost-tief); text-underline-offset:3px; white-space:nowrap}
.fq__liste{margin-top:var(--sp-7); border-top:1px solid var(--bleistift)}
.fq__i{border-bottom:1px solid var(--bleistift)}
.fq__s{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:var(--sp-4); align-items:start; padding-block:var(--sp-5);
  list-style:none; cursor:pointer; font-weight:700; font-size:var(--fs-h3); line-height:1.25}
.fq__s::-webkit-details-marker{display:none}
/* currentColor: Im Kontrastmodus folgt der Pfeil der Systemfarbe des Texts, eine feste Strichfarbe zwingt er nicht um */
.fq__ch{width:16px; height:16px; margin-top:.2em; fill:none; stroke:currentColor; stroke-width:2.5}
.fq__i[open] .fq__ch{rotate:90deg}
@media (hover:hover){.fq__s:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px}}
.fq__a{max-width:var(--w-text); padding:0 0 var(--sp-5) calc(16px + var(--sp-4))}
.fq__a a{color:var(--rost-tief); text-underline-offset:3px}
.fq__end{margin-top:var(--sp-6); font-weight:700}
@media screen and (min-width:61.3125em){.fq__liste{margin-top:0}}

/* ---------- Fuss ---------- */
.ft{--fokus:var(--markierung); background:var(--tusche-tief); color:var(--pause-hell);
  padding-top:var(--sect-pad); padding-bottom:var(--sp-5)}
/* Der Hinweis liegt fest ueber dem Fuss: Reserve aus seiner gemessenen Hoehe */
html.ck-open .ft{padding-bottom:calc(var(--sp-5) + var(--ck-h,var(--ck-h0)))}
/* Unter dem Credit so viel Luft wie darueber. Die Reserve fuer die Anruf-Leiste nur, wo sie stehen kann (Bedingung wie an der
   Leiste): Am Rechner und auf den Unterseiten standen sonst 128 px leer. Bei offenem Hinweis steht sie darueber.
   Die Klasse traegt der Fuss der Seiten mit Leiste (Startseite, Blaetter). */
@media (max-width:30em) and (min-height:25em){
  .ft--leiste{padding-bottom:calc(var(--sp-5) + 56px + env(safe-area-inset-bottom))}
  html.ck-open .ft--leiste{padding-bottom:calc(var(--sp-5) + var(--ck-h,var(--ck-h0)) + 56px)}
}
.ft a{color:var(--pause-hell); text-decoration:none}
@media (hover:hover){.ft a:hover{color:var(--markierung)}}
.ft__cols{display:grid; gap:var(--sp-7)}
.ft__logo{width:min(272px,100%); height:auto; aspect-ratio:600/150}
.ft__claim{margin-top:var(--sp-4); max-width:26ch; font-size:var(--fs-klein); line-height:1.5}
.ft__h{font-weight:700; color:var(--papier)}
.ft__l{margin-top:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2)}
.ft__l a{display:inline-block; padding-block:2px; overflow-wrap:anywhere}
.ft__hours{margin-top:var(--sp-3); font-size:var(--fs-klein); line-height:1.7}
/* minmax an der Kontaktspalte: mit 1fr bricht info@phbau-nord.de zwischen 781 und 935 px in der Domain um.
   In rem, damit es auch bei 24 px Grundschrift haelt. */
@media (min-width:48.8125em){.ft__cols{grid-template-columns:1.4fr 1fr minmax(10.25rem,1fr) 1fr; gap:var(--sp-6) var(--sp-7)}}
.ft__bottom{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-3) var(--sp-5); margin-top:var(--sp-8); font-size:var(--fs-klein)}
.ft__ki{margin-top:var(--sp-4); max-width:var(--w-text); font-size:var(--fs-klein); line-height:1.5}
/* Widerruf des Merkers: steht wie die Links daneben, ohne Skript bleibt er verborgen (hidden) */
.ft__sp-btn{padding:0; border:0; background:none; color:var(--pause-hell); font:inherit; text-align:left; cursor:pointer}
/* Am Handy Tippziele nach Hausregel (44 px): Fusslinks und Widerruf standen bei 32 bzw. 23 px (QA-Probe 29.10.2026) */
@media (max-width:30em){.ft__bottom a,.ft__sp-btn{display:inline-flex; align-items:center; min-height:44px}}
@media (hover:hover){.ft__sp-btn:hover{color:var(--markierung)}}
@media (forced-colors:active){.ft__sp-btn{color:LinkText}}
/* Credit: eine Trennlinie, Kreise 28 px mit 44er-Trefferflaeche, 16 px Abstand */
.ft__credit{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px;
  margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--linie-auf-tusche);
  font-size:var(--fs-klein); text-align:center}
.ft__credit>span>a{text-decoration:underline; text-underline-offset:3px}
.ft__badges{display:flex; gap:16px}
.ft__badges a{position:relative; display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; background:var(--tusche-hell)}
.ft__badges a::before{content:""; position:absolute; inset:-8px}
.ft__badges svg{width:14px; height:14px; fill:var(--papier)}
@media (hover:hover){
  .ft__badges a:hover{background:var(--markierung)}
  .ft__badges a:hover svg{fill:var(--tusche)}
}
@media (prefers-reduced-motion:no-preference){.ft__badges a{transition:background .16s}}
/* Kontrastmodus: feste SVG-Farben zwingt er nicht um, die Symbole stuenden papierfarben auf Weiss. Weisses
   Fuss-Logo gegen das dunkle tauschen, Logos auf eigenem Grund, die Leiste bekommt eine Kante. */
@media (forced-colors:active){
  .ft__badges svg,.ft__badges a:hover svg{fill:LinkText}
  .ft__logo{content:url(img/logo.svg)}
  .hdr__logo img,.ft__logo{forced-color-adjust:none; background:#fcfcfa}
  .callbar{border-top:2px solid CanvasText}
  /* Knoepfe mit Rahmen: von der Bordkante bliebe sonst nur die untere Kante, der Knopf laese sich als unterstrichener Text */
  .btn{border:1px solid ButtonText; border-bottom-width:3px}
  /* Das Schnittband steht wie ein Bild: Sonst zwingt der dunkle Modus die Schichtflaechen auf Schwarz, die
     Tusche-Kacheln bleiben und die Zeichnung geht unter */
  .schnitt,.riss{forced-color-adjust:none}
  /* Die Zeichnung hat keine eigene Flaeche: Im dunklen Kontrastmodus stuenden die Masszahlen sonst auf Schwarz */
  .riss{background:var(--papier)}
  /* Der Lageplan steht wie ein Bild auf eigenem Papier, sonst blieben Tusche-Linien und -Namen auf dunklem Systemgrund */
  .lp svg{forced-color-adjust:none; background:var(--papier)}
}
@media (max-width:30em){.ft__credit{flex-direction:column}}

/* ---------- Cookie-Hinweis (Info, kein Consent) ---------- */
/* Sichtbar ueber html.ck-open aus dem Kopf-Skript: so steht der Zustand schon beim ersten Bild fest, auch wenn
   das Skript am Seitenende spaet kommt (der erste Bildschirm rechnet mit der Hinweis-Hoehe). */
.ck{display:none; position:fixed; left:0; right:0; bottom:0; z-index:120; background:var(--papier); color:var(--tusche);
  padding:var(--sp-4) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom));
  border-top:1.5px solid var(--tusche)}
html.ck-open .ck{display:block}
.ck__in{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4) var(--sp-5);
  max-width:var(--w-max); margin-inline:auto}
.ck__t{flex:1 1 12.5rem; min-width:0; font-size:var(--fs-klein); line-height:1.5}
.ck__t a{color:var(--rost); text-underline-offset:3px}
.ck__btn{min-height:44px; font-size:1rem; padding:var(--sp-2) var(--sp-6)}
/* Bis 480 px die Kurzfassung: Zweck, "kein Tracking" und der Link bleiben (gemessen 07.09.2026) */
@media (max-width:30em){
  .ck{padding-block:var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom))}
  .ck__in{gap:var(--sp-3) var(--sp-5)}
  .ck__lang{display:none}
  .ck__btn{padding-inline:var(--sp-5)}
}

/* ---------- Textseite ---------- */
.doc{padding-block:var(--sect-pad); overflow-wrap:break-word}
.doc__in > *{max-width:var(--w-text)}
.doc h1{font-size:var(--fs-h2); line-height:.92; margin-bottom:var(--sp-6)}
.doc h2{font-family:var(--f-text); font-size:var(--fs-h3); line-height:1.2; letter-spacing:0; margin-top:var(--sp-8); margin-bottom:var(--sp-3)}
.doc h3{font-size:1.125rem; margin-top:var(--sp-5); margin-bottom:var(--sp-2)}
.doc p+p,.doc ul+p,.doc p+ul,.doc dl+p{margin-top:var(--sp-4)}
.doc ul{margin-top:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2)}
.doc ul li{padding-left:var(--sp-5); position:relative}
.doc ul li::before{content:""; position:absolute; left:0; top:.72em; width:10px; height:2px; background:var(--markierung)}
.doc dl{margin-top:var(--sp-4); display:grid; gap:var(--sp-1)}
.doc dt{font-weight:700; margin-top:var(--sp-3)}
.doc dd{margin:0}
.doc a{color:var(--rost); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere}
.doc code{font-size:.9em; overflow-wrap:anywhere}
.lead{margin-top:var(--sp-5); font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem); line-height:1.45}
.doc__stand{margin-top:var(--sp-8); padding-top:var(--sp-5); border-top:1px solid var(--bleistift);
  font-size:var(--fs-klein); color:var(--bleistift)}
.doc__back{display:inline-flex; align-items:center; min-height:44px; margin-top:var(--sp-6); font-weight:700; color:var(--rost);
  text-decoration-thickness:2px; text-underline-offset:5px}
/* Verzeichnis der Datenschutzerklaerung: Splitt-Flaeche, Links dort in Rost tief (Rost hat auf Splitt nur 4,29:1) */
.toc{margin-top:var(--sp-6); padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6); background:var(--splitt); border-left:4px solid var(--tusche)}
.toc__t{font-weight:700; font-size:var(--fs-klein); letter-spacing:.12em; text-transform:uppercase}
.toc__l{margin-top:var(--sp-2); padding-left:1.6em}
.toc__l li{margin-top:var(--sp-2)}
.toc__l a{color:var(--rost-tief)}
/* Kasten mit Telefon (Danke, Fehler, 404): Tusche-Flaeche wie die Kontakt-Spalte der Startseite */
.kasten{--fokus:var(--markierung); margin-top:var(--sp-7); padding:var(--sp-6) var(--sp-5); background:var(--tusche); color:var(--papier)}
.kasten p{color:var(--pause-hell)}
.kasten a{color:var(--papier)}
.kasten .tel{display:inline-block; margin-top:var(--sp-4); padding-bottom:var(--sp-1); border-bottom:3px solid var(--markierung);
  font-family:var(--f-eng); font-weight:700; font-size:clamp(2rem,1.6rem + 1.6vw,3rem); line-height:1.05; text-decoration:none}
@media (hover:hover){.kasten a:hover{color:var(--markierung)}}
@media (min-width:48em){.kasten{padding:var(--sp-7) var(--sp-6)}}
@media (forced-colors:active){.kasten{border:1px solid CanvasText}}

/* ---------- Foto-Tafel: echtes Foto, die Bildunterschrift als Schriftfeld (Startseite und Blaetter) ----------
   Nur die Tafel selbst. Anordnung, Abheben und Grossansicht der Projekt-Tafeln stehen auf der Startseite. Vor dem Druck,
   damit hinter ihr keine gemeinsame Regel mit ihr die Reihenfolge tauscht (Umzug A1, 01.11.2026). */
.tafel{min-width:0; margin:0}
/* Splitt ist der Bildgrund beim Laden. scroll-margin: Der Fokus hebt das Foto 8 px, der Ring steht 9 px weiter aussen;
   ohne Rand rutschte die hohe Tafel bei 1280 x 720 mit Hinweis per Tab halb unter den Kopf. */
.tafel__m{position:relative; background:var(--splitt)}
.tafel__m img{width:100%; height:auto; aspect-ratio:3 / 4; object-fit:cover; scroll-margin-block:24px}
.tafel--quer .tafel__m img{aspect-ratio:4 / 3}
.tafel__cap{margin-top:var(--sp-2); padding-top:var(--sp-2); border-top:1px solid var(--bleistift);
  font-size:var(--fs-klein); line-height:1.4; color:var(--bleistift)}

/* ---------- Blatt: eine Leistung je Seite (Bauplan Ausbau 5.2, Vorlage blatt-vorlage.example.html) ----------
   Blattkopf mit Brotkrumen, Schriftfeld, H1, Anruf und Gelaendelinie, darunter der Schnitt ueber die ganze Breite und die
   Erreichbarkeit. Dann "Was drunter liegt" mit Foto-Tafel, die Fragen (.fq), der Weg in Rechner und Anfrage, die Blattfolge.
   Der Schnitt ist das Schnittband der Startseite samt Lade-Auftakt, --s (Pixel je cm) setzt der Blattkopf. */
.blattkopf{--s:clamp(3px,.62svh,5px); padding-bottom:var(--sect-pad); overflow-wrap:break-word}
.bk{padding-top:var(--sp-2)}
.bk__pfad ol{display:flex; flex-wrap:wrap; align-items:center; list-style:none; padding:0; font-size:var(--fs-klein); line-height:1.3}
/* Trennzeichen ohne Ansage: die zweite Zeile mit leerem Alternativtext, die erste fuer Browser ohne ihn */
.bk__pfad li + li::before{content:"›"; content:"›" / ""; padding-inline:.5em; color:var(--bleistift)}
/* 44 px hoch wie die Fusslinks am Handy (Hausregel) */
.bk__pfad a{display:inline-flex; align-items:center; min-height:44px; color:var(--rost); text-underline-offset:3px}
/* Schriftfeld wie auf einer Bauzeichnung: Leistung, Massstab, Betrieb und Sitz. Am Handy eine kleine Zeile unter den Brotkrumen;
   der Trennstrich steht mitten in der Luecke, am Anfang einer umbrochenen Zeile schneidet ihn der Rand ab. */
.bk__feld{display:flex; flex-wrap:wrap; column-gap:1.2em; overflow:hidden; font-size:var(--fs-klein); line-height:1.3; color:var(--bleistift)}
.bk__feld li{position:relative}
.bk__feld li::before{content:""; position:absolute; top:.1em; bottom:.1em; left:-.6em; border-left:1px solid var(--bleistift)}
.bk h1{margin-top:var(--sp-3)}
.bk__titel{display:block; padding-bottom:.06em; font-size:clamp(min(2.75rem,12vw),1.75rem + 4.2vw,6rem)}
.bk__sub{display:block; margin-top:.5em; max-width:34ch; font-family:var(--f-text); font-weight:700;
  font-size:clamp(1.125rem,.9rem + 1.2vw,1.75rem); line-height:1.3; letter-spacing:0}
.bk__cta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4) var(--sp-6); margin-top:clamp(20px,3.5svh,40px)}
.bk__tel{min-height:56px; font-size:1.1875rem}
/* Den Rechner erreicht man am Handy ueber "Zum Rechner" weiter unten und das Menue, wie auf der Startseite */
@media (max-width:61.25em){.bk__rechner{display:none}}
/* Gelaendelinie: Kostenlos-Hinweis und Zeichnungstitel stehen auf ihr, direkt ueber dem Stein */
.bk__linie{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--sp-2) var(--sp-5);
  margin-top:var(--sp-4); padding-bottom:var(--sp-2)}
.bk__risiko{max-width:46ch; font-size:1rem; line-height:1.5}
.bk__bezug{font-size:var(--fs-klein); line-height:1.3; color:var(--bleistift)}
/* Erreichbarkeit zweimal im HTML, je eine sichtbar: am Handy unter dem Schnitt wie auf der Startseite (darueber haelt der Falz
   bei 390 x 664 nicht), am Rechner auf der Gelaendelinie neben dem Kostenlos-Hinweis. Der Blattkopf kann sie dort nicht per
   Reihenfolge tauschen: Er braucht als Traeger des Seitenwechsels eine eigene Box (kein display:contents). */
.bk__k1{margin-top:var(--sp-4); font-size:1rem; line-height:1.5}
.bk__k1--oben{display:none}
/* Zwei Wege unter dem Schnitt, am Handy direkt nach der Erreichbarkeit. Den Rechner-Link nur dort, am Rechner steht er oben neben dem
   Knopf. Schreiben wie .start__schreib: Die ganze Zeile ist das Tippziel (mindestens 44 px), unterstrichen ist nur die Frage. */
.bk__wege{margin-top:var(--sp-2)}
.bk__schreib{display:block; width:fit-content; padding-block:10px; font-size:1rem; line-height:1.5; color:var(--tusche); text-decoration:none}
.bk__schreib span{font-weight:700; color:var(--rost); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px}
/* Bei grosser Grundschrift (am Handy unter 19.9em Breite) schoeben Schriftfeld und zweite Brotkrume den Anruf-Knopf unter den Hinweis.
   Die Leistung steht direkt darunter in der H1. */
@media (max-width:19.9em){.bk__feld,.bk__pfad li + li{display:none}}
@media (min-width:61.3125em){
  .blattkopf{--s:clamp(3.4px,.75svh - 1.2px,6.2px)}
  .bk{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(32px,4vw,64px); padding-top:var(--sp-3)}
  .bk > *{grid-column:1}
  .bk__feld{grid-column:2; grid-row:1 / span 2; align-self:start; display:block; overflow:visible; min-width:15rem;
    margin-top:var(--sp-3); border:1.5px solid var(--tusche); color:var(--tusche)}
  .bk__feld li{padding:var(--sp-2) var(--sp-4)}
  .bk__feld li::before{content:none}
  .bk__feld li + li{border-top:1px solid var(--tusche)}
  .bk__feld li:first-child{font-weight:700}
  .bk__linie{grid-column:1 / -1; margin-top:var(--sp-5)}
  .bk__k1--oben{display:block; max-width:40ch; margin:0 auto 0 0; padding-left:var(--sp-5); border-left:1px solid var(--bleistift)}
  .bk__k1--unten{display:none}
  .bk__wege{margin-top:var(--sp-4)}
  .bk__wege-rechner{display:none}
}
/* Papier an Papier mit gerader Kante; nach den Fragen (Splitt) braucht es keine */
.drunter,.weiter{padding-block:var(--sect-pad); border-top:1px solid var(--bleistift); overflow-wrap:break-word}
.fq + .weiter{border-top:0}
.drunter__liste{list-style:none; padding:0; margin-top:var(--sp-6); border-top:1px solid var(--bleistift)}
.drunter__lage{padding-block:var(--sp-4); border-bottom:1px solid var(--bleistift)}
.drunter__lage p{max-width:var(--w-text); margin-top:var(--sp-2)}
.drunter__tafel{max-width:26rem; margin-top:var(--sp-7)}
.weiter__ablauf{margin-top:var(--sp-6)}
.weiter__ablauf p{max-width:var(--w-text)}
@media screen and (min-width:61.3125em){
  .drunter__tafel{width:100%; margin-top:0; justify-self:end}
  .weiter__ablauf{margin-top:0}
}
/* Blattfolge: nur live gegangene Blaetter in Bauabfolge, dazu der Weg zurueck in die Uebersicht */
.folge{padding-block:var(--sp-5); border-top:1px solid var(--bleistift)}
.folge__in{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-6)}
.folge__alle{margin-left:auto}
.folge a{gap:.35em}
.folge svg{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2.5}
.folge__zurueck svg{rotate:180deg}

/* ---------- Seitenwechsel (Bauplan Ausbau 5.4): Kopf und Hinweis stehen still, der Rest blendet kurz ueber ----------
   Chrome, Edge und Safari ab 18.2, nur ohne "Bewegung reduzieren"; Firefox und alle anderen wechseln normal. Der Blattkopf heisst
   "blatt", nur ankommend (abgehend nimmt main.js ihm den Namen); ein Leistungs-Stein bekommt den Namen erst beim Verlassen der Seite
   (main.js) und waechst dann in den Blattkopf. Bei offenem Menue traegt nichts einen Namen, sonst laegen Kopf und Hinweis im Wechsel
   ueber dem Panel. Die Grossansicht der Startseite nimmt Kopf und Hinweis fuer ihre Dauer selbst die Namen. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .hdr{view-transition-name:kopf}
  .ck{view-transition-name:hinweis}
  .bk{view-transition-name:blatt}
  /* Die Anruf-Leiste mit eigenem Namen: Ragt der angeklickte Stein hinter die Leiste, lag er
     ohne Namen im ersten Bild ueber "Peer anrufen". So blendet die Leiste ueber ihm aus. Die Grossansicht der Fotos gibt es erst ab
     481 px, wo die Leiste fehlt. */
  .callbar{view-transition-name:leiste}
  html:has(#nav-t:checked) :is(.hdr,.ck,.bk,.callbar){view-transition-name:none}
  ::view-transition-group(blatt){animation-duration:.4s}
  /* Ohne Stein (andere Links, Zurueck) steht nur der neue Kopf in der Gruppe: Er blendet so kurz ein wie die Seite */
  ::view-transition-new(blatt):only-child{animation-duration:.25s}
}

/* ---------- Druck ---------- */
@media print{
  /* Ohne Ligaturen: In PDFs aus Firefox kam "fl" der D-DIN-Teilmenge als "Ë" in den Text, Suchen und Kopieren brachen
     ("PËasterstein", gemessen 17.10.2026). Am Bildschirm bleiben sie. */
  body{font-variant-ligatures:no-common-ligatures}
  .hdr{position:static; border-bottom:0}
  .nav-t,.burger,.nav,.nav-scrim,.tel-cta,.callbar,.ck,.start__rechner,.start__schreib{display:none !important}
  html,body{background:#fff !important}
  /* Schnittband im Endzustand. Endwerte mit !important statt animation:none: Firefox druckt sonst den laufenden Wert (Band leer),
     Chrome spielt den Auftakt nach dem Druck neu ab */
  .schicht{clip-path:none !important; opacity:1 !important}
  .stein{--fugenfarbe:#ee7400 !important}
  /* Fragen ohne Splitt und mit allen Antworten. Das Formular der Startseite hat auf Papier nichts zu tun. */
  .fq{background:none !important}
  @supports selector(::details-content){.fq__i::details-content{content-visibility:visible; block-size:auto}}
  .fq__ch,.kt__form{display:none !important}
  .fq__a{padding-left:0}
  .ft,.ft *,.ft *::before,.ft *::after{background:none !important; color:#000 !important}
  .ft{padding-bottom:var(--sp-5) !important}
  .ft__logo{content:url(img/logo.svg)}
  .ft__badges svg{fill:#000 !important}
  .ft__credit{border-top-color:#959595}
  .ft__sp{display:none !important}
  /* Auch der Knopf selbst, nicht nur seine Klammer (Hausregel: Fussknopf im Druck display:none) */
  .ft__sp-btn{display:none !important}
  .doc h2,.doc h3{break-after:avoid}
  .toc,.kasten,.kasten *{background:none !important; color:#000 !important}
  .toc{padding-left:0}
  .kasten{padding:var(--sp-4) 0 0; border-top:1px solid #000}
  .kasten .tel{border-bottom-color:#000}
  /* Blatt: Navigation und die Wege in Rechner und Formular haben auf Papier nichts zu tun. Schriftfeld, Telefon und
     Erreichbarkeit bleiben, der Schnitt steht fertig da (Band oben). */
  .bk__pfad,.bk__rechner,.bk__wege,.weiter,.folge{display:none !important}
  .drunter__lage,.drunter__tafel{break-inside:avoid}
}