/* ideenbüdchen — Unterseiten (raum, produkte), Stil der neuen Startseite S (15.09.2026)
   Kein Inline-Stil, kein Skript (CSP der Live-Seite). Schriften selbst gehostet.
   Kopfzeile · kleines Zeichen · Titel mittig · Text linksbündig im 640er-Satz · Fuß mit Icons. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("inter-latin.woff2") format("woff2")}
@font-face{font-family:"Architects Daughter";font-style:normal;font-weight:400;font-display:swap;src:url("architects-daughter-latin.woff2") format("woff2")}

:root{
  --nachtblau:#222E3A; --offwhite:#FDFBF7; --creme:#EDE4D3; --grau:#60666A;
  --linie:#DDD5C6; --kupfer:#A87D28;
  --satz:640px; --rand:24px; --zeichen:96px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--offwhite);color:var(--nachtblau)}
body{font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:26px;-webkit-font-smoothing:antialiased;padding:0 var(--rand) 48px}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.2em}
.versal{font-size:14px;line-height:24px;letter-spacing:.18em;text-transform:uppercase}
p{margin:0 0 16px}
strong{font-weight:600}

/* Kopfzeile wie auf der Startseite */
.kopf{max-width:960px;margin:0 auto;padding:24px 0 0;display:flex;justify-content:flex-end;align-items:baseline}
.kopf .ort{margin:0;color:var(--grau);font-size:17px;line-height:24px;letter-spacing:.12em}
.kopf nav{display:flex;gap:32px;font-size:17px;line-height:24px}
.kopf nav a[aria-current]{border-bottom:1.4px solid currentColor;padding-bottom:2px}

/* Titel: kleines Zeichen, mittig, darunter die Überschrift und der erste Satz */
.titel{max-width:var(--satz);margin:0 auto;text-align:center;padding:48px 0 0}
.titel .zeichen{display:block;width:var(--zeichen);height:auto;margin:0 auto}
.titel .zeichen{opacity:0;animation:auf 1.2s cubic-bezier(.4,0,.6,1) .2s forwards}
@keyframes auf{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.titel .zeichen{opacity:1;animation:none}}
/* Seitenmarke = die Tür, durch die man gekommen ist. Gleiche Höhe (70×83) für Haus und Punkt,
   der Punkt sitzt auf Punkthöhe des Zeichens; die Unterstreichung der Navigation trägt die Farbe. */
.titel.produkte .zeichen{width:var(--zeichen)}
.produkte .kopf nav a[aria-current],body.produkte .kopf nav a[aria-current]{border-bottom-color:var(--kupfer)}
.titel h1{margin:40px 0 16px;font-size:clamp(32px,7vw,52px);line-height:1.08;font-weight:400;letter-spacing:-.03em;text-wrap:balance}
.titel .lead{margin:0 auto;max-width:30em;font-size:20px;line-height:30px;font-weight:600;letter-spacing:-.01em}

/* Inhalt: linksbündig im Satz */
main{max-width:var(--satz);margin:0 auto}
.block{padding:64px 0 0}
.block h2{margin:0 0 24px;font-weight:400;color:var(--nachtblau)}
.impressum .block,.datenschutz .block{padding-top:56px}
.status{margin:0 0 24px;padding:4px 0 4px 24px;border-left:3px solid var(--nachtblau)}
.klein{font-size:15px;line-height:24px;color:var(--grau)}

/* Angaben: Zeilen mit hellen Linien, Etikett in Versalien */
.angaben{margin:32px 0 0;padding:0}
.angaben > div{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:1px solid var(--linie)}
.angaben > div:first-child{border-top:1px solid var(--linie)}
.angaben dt{font-size:13px;line-height:24px;letter-spacing:.18em;text-transform:uppercase;color:var(--grau)}
.angaben dd{margin:0}
.angaben .preis strong{font-size:26px;line-height:32px;letter-spacing:-.02em;white-space:nowrap}

/* Verfahren */
.verfahren{margin:0;padding:0;list-style:none}
.verfahren li{padding:14px 0;border-bottom:1px solid var(--linie)}
.verfahren li:first-child{border-top:1px solid var(--linie)}
.verfahren strong{display:block}

/* Knopf */
.tun{margin:32px 0 0}
.knopf{display:inline-block;padding:14px 28px;background:var(--nachtblau);color:var(--offwhite);font-weight:600;line-height:24px}
.knopf:hover{text-decoration:none;background:#24313A}
.hinweis{margin:16px 0 0}

/* Platzhalter, temporär — bis Yvonne liefert */
.fehlt{display:block;border:1px dashed #B03030;background:#FBEDED;color:#B03030;padding:8px 12px;font-size:15px;line-height:22px;margin:0 0 16px}

/* Fuß wie auf der Startseite */
.fuss{max-width:960px;margin:96px auto 0;padding-top:12px;border-top:1px solid var(--linie);font-size:16px;line-height:24px}
.wege-fuss{display:flex;justify-content:center;flex-wrap:nowrap;margin:0;padding:0;list-style:none;font-size:16px}
@media (max-width:899px){.wege-fuss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center}}
/* Handy: eine Spalte, sonst sprengen „whatsapp schreiben“ und „@ideenbuedchen.andernach“ die Breite */
@media (max-width:639px){.wege-fuss{grid-template-columns:1fr;justify-items:start;width:max-content;max-width:100%;margin:0 auto}}
.wege-fuss li{padding:0 14px;line-height:24px;display:flex;align-items:center}
.wege-fuss a{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.ikon{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ikon .voll{fill:currentColor;stroke:none}
.zeile{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:12px;padding-top:16px;border-top:1px solid var(--linie);font-size:14px;line-height:24px;letter-spacing:.02em;color:var(--grau)}
.zeile p{margin:0}

@media (max-width:639px){
  .kopf nav{gap:20px;font-size:14px}
  .kopf .ort{font-size:14px}
}
@media (min-width:640px){
  :root{--zeichen:112px;--rand:32px}
  body{font-size:20px;line-height:32px;padding-bottom:64px}
  .kopf{padding-top:32px}
  .titel{padding-top:64px}
  .titel .lead{font-size:22px;line-height:32px}
  .block{padding-top:96px}
  .angaben > div{flex-direction:row;align-items:baseline;gap:24px}
  .angaben dt{flex:0 0 152px}
  .angaben .preis strong{font-size:28px;line-height:32px}
  .klein{font-size:16px;line-height:26px}
  .fuss{margin-top:128px}
}

/* Große Bildschirme wie die Startseite (W): Rahmen 1200, Satz 760, Text 21/34 */
@media (min-width:1200px){
  :root{--zeichen:128px;--satz:760px}
  .kopf,.fuss{max-width:1200px}
  body{font-size:21px;line-height:34px}
  .titel h1{font-size:60px}
  .titel .lead{font-size:24px;line-height:34px}
  .kopf{padding-top:40px}
  .titel{padding-top:80px}
  .block{padding-top:112px}
  .impressum .block,.datenschutz .block{padding-top:64px}
  .fuss{margin-top:144px}
}

/* Links im Fliesstext sind sonst nicht von Text zu unterscheiden. Knopf und Fuss bleiben wie sie sind. */
main p a:not(.knopf){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* Verfahren mit Foto: Bild links, Text rechts; am Handy Bild ueber Text */
.verfahren.mit-fotos{list-style:none;padding:0;margin:0;display:grid;gap:32px}
.verfahren.mit-fotos li{display:grid;grid-template-columns:1fr;gap:12px 24px;align-items:start}
.verfahren.mit-fotos figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--creme)}
.verfahren.mit-fotos img{display:block;width:100%;height:100%;object-fit:cover}
.verfahren.mit-fotos strong{display:block;margin-bottom:4px}
@media (min-width:640px){
  .verfahren.mit-fotos li{grid-template-columns:200px 1fr}
  .verfahren.mit-fotos li:nth-child(even){grid-template-columns:1fr 200px}
  .verfahren.mit-fotos li:nth-child(even) figure{order:2}
}

/* Verfahren ohne Foto: Text über die ganze Breite */
.verfahren.mit-fotos li:not(:has(figure)){grid-template-columns:1fr}