/* Fußzeile „Planblatt“ (09.11.2026, Szymons Wahl: Lichtpause = data-ton="dunkel"). Erzeugt von tools/planblatt.py
   (Startseite) und tools/rechtsseiten.py (Rechtsseiten), Verhalten in js/footer.js.
   Oben ein Satz und die Anfrage, darunter Name und Links, dann die Villa aus dem Startbereich als Werkzeichnung
   (Straßen- und Giebelseite, echte Maße aus dem 3D-Modell, Raster 1 m), ganz unten die Pflichtzeile. Randlos.
   Die Zeichnung legt sich Strich für Strich an, sobald sie gut im Bild ist (--pb-slow streckt den ganzen Ablauf).
   Auf der Startseite wird der Footer aufgedeckt wie bei back to ctrl (Kontakt als Karte darüber, siehe unten). */

.site-footer.pb { padding: 0; overflow: clip; --pb-slow: 1.15;
  --pb-paper: var(--paper); --pb-ink: var(--ink); --pb-ink-2: var(--ink-2); --pb-ink-3: var(--ink-3);
  --pb-rule: rgba(26, 26, 24, .14); --pb-red: var(--red);
  color: var(--pb-ink); }
/* Planblatt: Papier der Seite mit dem warmen Farbfeld des alten Footers, damit es ohne Kante anschließt.
   Lichtpause: deckend dunkel. */
.pb[data-ton="dunkel"] { background: var(--pb-paper); }
.pb[data-ton="dunkel"]::before { display: none; }
.pb[data-ton="dunkel"] { --pb-paper: #181816; --pb-ink: #EFEBE2; --pb-ink-2: rgba(239, 235, 226, .76); --pb-ink-3: rgba(239, 235, 226, .5);
  --pb-rule: rgba(239, 235, 226, .14); --pb-red: #EC6A4C; }

.pb-sheet { padding: clamp(72px, 8vw, 136px) max(var(--g), calc((100% - 1760px) / 2)) calc(clamp(28px, 2.6vw, 40px) + env(safe-area-inset-bottom, 0px)); }

/* Kopf: ein Satz, die Anfrage */
.pb-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 28px clamp(32px, 5vw, 96px); align-items: end; padding-bottom: clamp(32px, 3.4vw, 56px); }
.pb-title { margin: 0; font-weight: 300; font-size: clamp(44px, 6.3vw, 116px); line-height: .93; letter-spacing: -.052em; color: var(--pb-ink); text-wrap: balance; }
.pb-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: .5em; }
.pb-lead { margin: 0; max-width: 25em; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.45; font-weight: 340; color: var(--pb-ink-2); }
.pb[data-ton="dunkel"] .btn--ink { background: var(--paper); color: var(--ink); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .7); }
.pb[data-ton="dunkel"] .btn--ink .btn-ico { background: rgba(26, 26, 24, .08); }
@media (hover: hover) and (pointer: fine) { .pb[data-ton="dunkel"] .btn--ink:hover { background: #fff; } }

/* Die Zeichnung */
.pb-draw { position: relative; margin: clamp(56px, 6vw, 104px) 0 0; padding: 0; }
.pb-svg { --k: 1; display: block; width: 100%; height: auto; overflow: visible; }
.pb-svg--m { --k: 1.75; display: none; }
.pb-svg .pg { fill: none; stroke: var(--pb-ink); stroke-opacity: .085; stroke-width: calc(var(--k) * .7px); }
.pb-svg .pl { fill: none; stroke: var(--pb-ink); stroke-width: calc(var(--k) * 1px); stroke-linecap: round; stroke-linejoin: round; }
.pb-svg .pl--ground { stroke-width: calc(var(--k) * 2.6px); stroke-linecap: square; }
.pb-svg .pl--edge { stroke-width: calc(var(--k) * 1.55px); }
.pb-svg .pl--win { stroke-width: calc(var(--k) * 1px); }
.pb-svg .pl--fine { stroke-width: calc(var(--k) * .6px); }
.pb-svg .pl--seam { stroke-width: calc(var(--k) * .55px); stroke-opacity: .42; }
.pb-svg .pl--glass { stroke-width: calc(var(--k) * .6px); stroke-opacity: .5; }
.pb-svg .pl--hatch { stroke-width: calc(var(--k) * .6px); stroke-opacity: .38; }
.pb-svg .pl--tree { stroke-width: calc(var(--k) * .85px); stroke-opacity: .8; }
.pb-svg .pl--faint { stroke-opacity: .32; }
.pb-svg .pl--dim, .pb-svg .pl--kote { stroke: var(--pb-ink-2); stroke-width: calc(var(--k) * .7px); }
.pb-svg .pl--tick { stroke-width: calc(var(--k) * 1.4px); stroke-linecap: butt; }
.pb-svg .pl--bubble { stroke: var(--pb-ink-2); stroke-width: calc(var(--k) * .8px); }
.pb-svg .pl--title { stroke-width: calc(var(--k) * 1.3px); stroke-linecap: butt; }
.pb-svg .pa { fill: none; stroke: var(--pb-ink-3); stroke-width: calc(var(--k) * .7px); }
.pb-svg .pa--axis { stroke-dasharray: calc(var(--k) * 22px) calc(var(--k) * 5px) calc(var(--k) * 2px) calc(var(--k) * 5px); }
.pb-svg .pa--level { stroke-dasharray: calc(var(--k) * 3px) calc(var(--k) * 5px); stroke-opacity: .7; }
.pb-svg .pf { fill: var(--pb-ink); }
.pb-svg .pf--red, .pb-svg .pd { fill: var(--pb-red); }
.pb-svg text { font-family: var(--mono); font-size: calc(var(--k) * 12.5px); letter-spacing: .02em; fill: var(--pb-ink-2); }
.pb-svg .pt--small { font-size: calc(var(--k) * 11px); }
.pb-svg .pt--bubble { font-size: calc(var(--k) * 13px); fill: var(--pb-ink); }
.pb-svg .pt--kote { fill: var(--pb-ink); }
.pb-svg .pt--desc { font-family: var(--sans); font-size: calc(var(--k) * 12.5px); letter-spacing: .01em; fill: var(--pb-ink-3); }
.pb-svg .pt--title { font-family: var(--sans); font-weight: 500; font-size: calc(var(--k) * 14px); letter-spacing: .14em; fill: var(--pb-ink); }
.pb-svg .pt--red { fill: var(--pb-red); }

/* Einzeichnen: erst Gelände und Achsen, dann Wände, Dach, Fenster, Maße; zuletzt der rote Punkt am Eingang */
.js .pb .pl { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .pb .pt, .js .pb .pf, .js .pb .pa, .js .pb .pb-gridr { opacity: 0; }
.js .pb .pd { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
.pb.is-drawn .pl { animation: draw calc(var(--t, .8s) * var(--pb-slow)) var(--ease-in-out) calc(var(--d, 0s) * var(--pb-slow) + .2s) forwards; }
.pb.is-drawn .pt, .pb.is-drawn .pf, .pb.is-drawn .pa { animation: fadeIn .8s var(--ease-out) calc(var(--d, 0s) * var(--pb-slow) + .2s) forwards; }
.pb.is-drawn .pb-gridr { animation: fadeIn 1.8s var(--ease-out) forwards; }
.pb.is-drawn .pd { animation: pbDot .5s var(--ease-out) calc(var(--d, 0s) * var(--pb-slow) + .2s) forwards; }
@keyframes pbDot { to { opacity: 1; transform: none; } }

/* Unter der Zeichnung: schlicht Name, drei Linkspalten, Pflichtzeile */
.pb-foot { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 120px); align-items: start; padding-top: clamp(40px, 4vw, 64px); border-top: 1px solid var(--pb-rule); }
.pb-brand { display: inline-flex; align-items: center; gap: 16px; color: var(--pb-ink); text-decoration: none; }
.pb .pb-mark.footer-mark { height: 46px; color: var(--pb-ink); }
/* Computer: Logo mit Namen so groß, wie die linke Spalte breit ist (Szymon 09.11.: „riesengroß“). Alle Maße hängen an
   der Spaltenbreite (cqi), so füllt die Wortmarke die Spalte bei jeder Bildschirmbreite genau aus. */
@media (min-width: 900px) {
  .pb .pb-brand { container-type: inline-size; width: 100%; gap: 0; }
  .pb .pb-brand-word { margin-left: 6.3cqi; } /* Abstand am Kind: cqi gilt erst innerhalb der Spalte */
  .pb .pb-mark.footer-mark { height: 21cqi; }
  .pb .pb-brand-name { font-size: 9.2cqi; font-weight: 400; letter-spacing: .08em; } /* groß filigraner (Szymon) */
  .pb .pb-brand-sub { margin-top: 1.8cqi; font-size: 4.1cqi; }
}
.pb-brand-word { display: flex; flex-direction: column; line-height: 1.05; }
.pb-brand-name { font-weight: 600; font-size: 20px; letter-spacing: .07em; text-transform: uppercase; }
.pb-brand-sub { margin-top: 6px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--pb-ink-3); }
.pb-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pb-col h3 { margin: 0 0 20px; font-size: 16px; font-weight: 500; letter-spacing: -.005em; color: var(--pb-ink); }
.pb-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.pb-col a { font-size: 16px; color: var(--pb-ink-3); text-decoration: none; touch-action: manipulation; transition: color .15s ease; }
@media (hover: hover) and (pointer: fine) { .pb-col a:hover, .pb-brand:hover .pb-brand-name { color: var(--pb-ink); } }
.pb-col a[aria-current="page"] { color: var(--pb-ink); text-decoration: underline; text-decoration-color: var(--pb-red); text-underline-offset: 6px; text-decoration-thickness: 1px; }
.pb a:focus-visible { outline: 2px solid var(--pb-red); outline-offset: 3px; border-radius: 4px; }
.pb-legal { display: flex; justify-content: space-between; align-items: baseline; gap: 10px 32px; flex-wrap: wrap; margin-top: clamp(28px, 3vw, 48px); padding-top: 22px; border-top: 1px solid var(--pb-rule); font-size: 14px; color: var(--pb-ink-3); }
.pb-legal p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .js .pb .pl { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .pb .pt, .js .pb .pf, .js .pb .pa, .js .pb .pd, .js .pb .pb-gridr { opacity: 1; transform: none; }
  .pb.is-drawn .pl, .pb.is-drawn .pt, .pb.is-drawn .pf, .pb.is-drawn .pa, .pb.is-drawn .pd, .pb.is-drawn .pb-gridr { animation: none; }
}

@media (max-width: 899px) {
  .pb-sheet { padding: 56px var(--g) calc(104px + env(safe-area-inset-bottom, 0px)); }
  .pb-head { grid-template-columns: 1fr; gap: 22px; }
  .pb-title { font-size: clamp(40px, 11vw, 64px); }
  .pb-cta { gap: 20px; padding-bottom: 0; }
  .pb-cta .btn { width: 100%; justify-content: space-between; }
  .pb-svg--d { display: none; }
  .pb-svg--m { display: block; }
  .pb-foot { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
  .pb-draw { margin-top: 48px; }
  .pb-nav { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .pb-col h3 { margin-bottom: 16px; }
  .pb-col:last-child { grid-column: 1 / -1; }
  .pb-col:last-child ul { grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 28px; }
  .pb-legal { flex-direction: column; align-items: flex-start; margin-top: 28px; }
}

/* Hecke deckt die Linien dahinter ab */
.pb-svg .pf--paper { fill: var(--pb-paper); }
/* Höhe messen (nur mit Maus): rote Linie mit Höhe, rastet an den Höhenkoten ein */
.pb-cur { pointer-events: none; opacity: 0; transition: opacity .15s ease; }
.pb-svg.is-measuring .pb-cur { opacity: 1; }
.pb-cur-l { fill: none; stroke: var(--pb-red); stroke-width: .8px; stroke-dasharray: 6 4; }
.pb-cur.is-snap .pb-cur-l { stroke-dasharray: none; }
.pb-cur-d { fill: var(--pb-red); }
.pb-svg .pb-cur-t { fill: var(--pb-red); font-size: 12.5px; }
.pb-svg--d { cursor: crosshair; }

/* Footer aufdecken (wie back to ctrl), auf jeder Seite: die Seite als Karte mit runden Ecken darüber, Footer darunter festgehalten.
   JS setzt html.pb-reveal-on, --rv-d (so weit liegt der Footer unter der Karte) und --rv-b (sticky bottom). */
.pb-reveal-wrap { position: relative; z-index: 1; }
.pb-reveal-spacer { height: 0; }
.pb-reveal-shade { display: none; }
.pb-reveal-on .pb-reveal-wrap { margin-top: calc(-1 * var(--rv-d, 0px)); background: var(--paper); }
.pb-reveal-on .pb-reveal-wrap:has(.pb[data-ton="dunkel"]) { background: #181816; }   /* Farbe hinter den runden Kartenecken */
.pb-reveal-on .pb-reveal-spacer { height: var(--rv-d, 0px); }
.pb-reveal-on .site-footer.pb { position: sticky; bottom: var(--rv-b, 0px); z-index: 1; }
/* Karte über dem Footer: auf der Startseite der Kontakt, auf allen anderen Seiten der Hauptteil (js/footer.js setzt .pb-card).
   Sie muss deckend sein und genauso aussehen wie die Seite dahinter. */
.pb-reveal-on .pb-card { position: relative; z-index: 2; background: var(--paper); border-radius: 0 0 clamp(26px, 4vw, 46px) clamp(26px, 4vw, 46px); }
.pb-reveal-on .kontakt.pb-card { background: var(--surface, var(--paper)) fixed; }
.pb-reveal-on .lg-page > main.pb-card { background: radial-gradient(60% 55% at 92% 6%, rgba(213, 195, 171, .75) 0, transparent 70%), radial-gradient(55% 60% at -6% 96%, rgba(41, 72, 98, .2) 0, transparent 72%), radial-gradient(40% 40% at 62% 58%, rgba(194, 59, 34, .06) 0, transparent 70%), linear-gradient(160deg, #F2EFE7 0%, #E9E1D3 100%); background-attachment: fixed; }
/* Schatten nur unter der Karte, er wandert mit ihrer Unterkante */
.pb-reveal-on .pb-reveal-shade { display: block; position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--rv-d, 0px) - 120px); height: 120px; pointer-events: none;
  border-radius: 0 0 clamp(26px, 4vw, 46px) clamp(26px, 4vw, 46px); box-shadow: 0 30px 70px rgba(40, 30, 20, .3); clip-path: inset(120px -200px -240px -200px); }
.pb-reveal-on .pb-reveal-wrap:has(.pb[data-ton="dunkel"]) .pb-reveal-shade { box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
/* Sprachwechsel in der Pflichtzeile */
.pb-legal-lang a { color: var(--pb-ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--pb-rule); touch-action: manipulation; transition: color .15s ease; }
@media (hover: hover) and (pointer: fine) { .pb-legal-lang a:hover { color: var(--pb-ink); } }