/* =====================================================================
   pages/rest.css · Kontakt, Rechtstexte, 404 (Besitz: Team Blog/Rest)
   Stand Gesamtentwurf v2: Seitenkopf-System nach Unterseiten-Skizzen v1, 10–12 (freigegeben 03.11.2026).
   Lesebausteine (.lese, .toc, .txt) und Kopf-System kommen aus b12.css; kein @import mehr.
   ===================================================================== */

/* ======================= Kontakt (Skizze 10) ======================= */
/* Das Feld übernimmt die Rolle der Flut: größter Amber-Raum der Unterseiten, Kontaktwege in Plakatgröße */
.k-feld .feld__inhalt { padding-block: 48px 56px; }
.k-feld__satz { max-width: 26em; }
.wege { margin-top: 48px; }
.wege li { display: grid; gap: 2px; padding-block: 16px 18px; }
.wege__wert {
  font: 800 clamp(28px, 18.4px + 2.56vw, 56px)/1.05 var(--f-display); font-stretch: 100%; letter-spacing: -.01em;
  text-decoration: none; overflow-wrap: anywhere; justify-self: start;
}
.wege__wert:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
@media (min-width: 768px) { .wege li { grid-template-columns: 10em minmax(0, 1fr); align-items: baseline; } }
@media (min-width: 1024px) {
  .k-feld .feld__inhalt { padding-block: 64px 80px; }
  .wege { margin-top: 64px; }
}

/* Formular „Erzähl uns von deinem Projekt.“ im Weiß direkt unter dem Feld (Bausteine .formular aus b12.css) */
.anfrage .formular { margin-top: 56px; max-width: 820px; }
.anfrage + .termin { padding-top: 0; }

/* Terminbuchung im Weiß: H2 links, Text, drei Zusagen als Gegenstimme und eine Pille rechts */
.termin .raster { row-gap: 28px; }
.termin__text { display: grid; gap: 28px; justify-items: start; max-width: 34em; }
.termin__fakten { display: grid; gap: 4px; }
@media (min-width: 1024px) {
  .termin h2 { grid-column: 1 / 7; }
  .termin__text { grid-column: 8 / 13; }
}
.kontakt-fragen { padding-top: 0; }
.kontakt-fragen .fragen__liste { margin-top: 56px; }
.kontakt-fragen .frage h3 { hyphens: manual; -webkit-hyphens: manual; }

/* ======================= Rechtstexte (Skizze 11) ======================= */
/* Schwarz-Weiß ohne Amber: Inhaltsverzeichnis als Linienliste ohne Sechseck, aktueller Abschnitt unterstrichen */
.recht-lese { padding-block: 64px var(--sek); }
@media (min-width: 1024px) { .recht-lese { padding-top: 96px; } }
.recht .toc { border: 0; padding: 0; }
.recht .toc__liste li { border-top: 1px solid var(--b-schwarz); }
.recht .toc__liste li:last-child { border-bottom: 1px solid var(--b-schwarz); }
.recht .toc__liste li a { display: block; padding-block: 10px; color: var(--b-schwarz); }
.recht .toc__liste li.ist-eingerastet .toc__text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.txt--recht { font-size: 17px; line-height: 1.6; }
.txt--recht h2 { font: 800 clamp(24px, 21.2px + .75vw, 32px)/1.15 var(--f-display); font-stretch: 100%; }
.txt--recht h3 { font: 700 19px/1.3 var(--f-display); font-stretch: 100%; }
.txt--recht h4 { font-size: 17px; }
.txt--recht .txt-abschnitt > h2 { margin-top: 2.6em; }
.txt--recht > .txt-abschnitt:first-child > h2 { margin-top: 0; }
.txt--recht .txt-unter > h3 { margin-top: 1.8em; }
.txt--recht a { overflow-wrap: anywhere; }

/* ======================= 404 (Skizze 12) ======================= */
/* Feld mit ausgeschnittenem Stück: Sechseck 1 : 1,1547, spitz oben wie der Logo-Punkt, das Schwarz scheint durch.
   Bei Hover/Fokus auf einen Weg zurück rastet das Amber-Stück ins Loch (pages/rest.js setzt .ist-gefuellt). */
.e-feld .aktion { margin-top: 32px; }
.e-feld__loch { position: relative; justify-self: start; margin-top: 40px; width: 120px; aspect-ratio: 100 / 115.47; }
.e-feld__loch::before, .e-feld__stueck {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.e-feld__loch::before { background: var(--b-schwarz); }
/* das Stück endet 4 % größer als das Loch: so bleibt an der Kante keine Haarlinie Schwarz stehen */
.e-feld__stueck { background: var(--b-amber); transform: scale(0) rotate(-60deg); transition: transform 520ms var(--rast); }
.e-feld__loch.ist-gefuellt .e-feld__stueck { transform: scale(1.04) rotate(0deg); }
@media (min-width: 1024px) {
  .e-feld__haupt { grid-column: 1 / 9; }
  .e-feld__loch { grid-column: 10 / 13; grid-row: 1; justify-self: end; align-self: center; margin-top: 0; width: 220px; }
}