/* Gemeinsames Stilblatt der beiden Keyword-Landingpages (10.09.2026). Uebernimmt das
   Unterseiten-System von valo-studio.de (Token, Schriftstufen, Gegenkapitel .werk, dichte
   Stelle .fakten), damit beide Domains aus einem Guss sind. Schriften kommen per nginx-alias
   aus dem VALO-Docroot (/fonts/, /css/fonts.css), siehe dokumente/nginx-valo-studio-entwurf.conf. */
:root{--bg:#0b0a08;--ink:#f5f1e8;--muted:#a29a8c;--dim:#847c6e;--warm:#E3D8B4;--line:rgba(227,216,180,.14);--spine:rgba(227,216,180,.35);
  --t-h2:clamp(1.9rem,4.4vw,3.4rem);--t-h4:clamp(1.15rem,1.8vw,1.5rem);--t-body:clamp(1rem,1.3vw,1.15rem);--t-small:.95rem;--t-label:.78rem;
  --raum-sektion:clamp(4.4rem,9vh,7rem);--raum-block:clamp(1.8rem,3.4vh,2.6rem)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Outfit","Outfit Ersatz",Arial,sans-serif;font-weight:400;background:var(--bg);color:var(--ink)}
.wrap{max-width:42rem;margin:0 auto;padding:var(--raum-sektion) 1.5rem}
a{color:var(--warm)}
p.meta{font-weight:300;font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--warm);margin:var(--raum-block) 0 1rem}
h1{font-weight:100;font-size:var(--t-h2);line-height:1.15;margin-bottom:2rem;text-wrap:balance}
h2{font-weight:200;font-size:var(--t-h4);margin:var(--raum-block) 0 .8rem;color:var(--ink)}
h3{font-weight:400;font-size:var(--t-body);color:var(--ink);margin:var(--raum-block) 0 .3rem}
p{font-weight:400;font-size:var(--t-body);line-height:1.75;color:var(--muted);margin-bottom:1rem}
strong{color:var(--ink);font-weight:400}
ul{margin:0 0 1.4rem 0;list-style:none}
li{position:relative;padding-left:1.5rem;font-size:var(--t-body);line-height:1.75;color:var(--muted);margin-bottom:.5rem}
li::before{content:"";position:absolute;left:0;top:.85em;width:.55rem;height:1px;background:var(--warm)}
table{width:100%;border-collapse:collapse;margin:1.2rem 0 1.8rem}
th,td{text-align:left;padding:.85rem .6rem;border-bottom:1px solid var(--line);font-size:.96rem;line-height:1.6;color:var(--muted);vertical-align:top}
th{color:var(--ink);font-weight:300;font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase}
.fakten{margin:1.6rem 0 var(--raum-block);padding-left:1.1rem;border-left:1px solid var(--spine)}
.fakten p{font-size:.96rem;line-height:1.6;margin-bottom:.55rem}
.fakten b{color:var(--ink);font-weight:400}
.werk{background:#f5f1e8;color:#241b0c;margin:var(--raum-sektion) -1.5rem;padding:2.6rem 1.5rem 2.2rem}
/* Ab 44rem bekommt .wrap 3rem Seitenrand, damit die -3rem des Gegenkapitels nicht ueber den Viewport hinauslaufen (gemessen 10.09.2026: scrollWidth > innerWidth bei 1.5rem). */
@media(min-width:44rem){.wrap{padding-left:3rem;padding-right:3rem}.werk{margin-left:-3rem;margin-right:-3rem;padding:3rem}}
.werk p,.werk li{color:#4a4034}
.werk h2{color:#241b0c;margin-top:0}
.werk li::before{background:#241b0c}
.werk .klein{font-weight:300;font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:#78694f;margin-bottom:.9rem}
.werk a{color:#241b0c;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.werk a:hover{background:#241b0c;color:#f5f1e8;text-decoration:none}
.cta{display:inline-block;margin-top:var(--raum-block);padding:1rem 2.2rem;border:1px solid var(--warm);color:var(--warm);text-decoration:none;font-weight:300;font-size:var(--t-small);letter-spacing:.18em;text-transform:uppercase}
.cta:hover{background:var(--warm);color:#241b0c}
footer{margin-top:var(--raum-sektion);padding-top:1.2rem;border-top:1px solid var(--line);font-weight:300;font-size:var(--t-label);color:var(--dim);line-height:1.8}
footer a{color:var(--muted);white-space:nowrap}

/* Anfrageblock (09.10.2026, OMR-Pruefung: der Anfrageweg liegt auf der Zielseite selbst, nicht erst auf valo-studio.de).
   Wortlaut und Aufbau wie der freigegebene Anfrageblock der Unterseiten (Brand-Guidelines §8, 28.09.2026). */
.anfrage{margin-top:var(--raum-sektion);padding-top:var(--raum-block);border-top:1px solid var(--line)}
.anfrage h2{font-size:var(--t-h2);font-weight:100;line-height:1.15;margin:0 0 .8rem}
.anfrage>p{margin-bottom:1.6rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field{position:relative;margin-bottom:1.1rem}
.field input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--spine);color:var(--ink);font:inherit;font-size:var(--t-body);padding:1.1rem 0 .55rem;outline:none}
.field input:focus{border-bottom-color:var(--warm)}
.field label{position:absolute;left:0;top:1.05rem;color:var(--dim);font-size:var(--t-body);pointer-events:none;transition:transform .2s,font-size .2s,color .2s}
.field input:focus+label,.field input:not(:placeholder-shown)+label{transform:translateY(-1rem);font-size:var(--t-label);letter-spacing:.08em;color:var(--warm)}
.field .opt{color:var(--dim);font-size:.85em}
.cta-voll{background:var(--warm);color:#241b0c;cursor:pointer;font-family:inherit;margin-top:1.4rem}
.cta-voll:hover{background:#f5efdc}
.cta-voll:disabled{opacity:.6;cursor:default}
.hint{font-size:var(--t-label);letter-spacing:0;text-transform:none;color:var(--dim);line-height:1.6;margin:1rem 0 0}
.wege{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-size:var(--t-small)}
.wege a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.wege a:hover{color:var(--ink);border-bottom-color:var(--warm)}
.success,.formfehler{display:none;margin-top:1.2rem;color:var(--ink);font-size:var(--t-body);line-height:1.7}
.formfehler a{color:var(--warm)}

/* Kopfzeile und Mietmodell-Karte (10.10.2026, Entscheidung Jan, Maske: Fassung 2). Wortmarke wie Brand-Guidelines §4 (VALO 100, Studio 300), Lichtkante wie §7, Karte nur mit Oberkante (§6). */
.kopf{position:relative;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:.9rem 2rem;padding-bottom:1.1rem}
.kopf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--warm) 18%,#fff 50%,var(--warm) 82%,transparent);opacity:.6}
.wortmarke{display:inline-flex;align-items:baseline;gap:.5rem;text-decoration:none;color:var(--ink);line-height:1}
.wortmarke b{font-weight:100;font-size:2.4rem;letter-spacing:.09em}
.wortmarke i{font-style:normal;font-weight:300;font-size:.92rem;letter-spacing:.08em;color:var(--muted)}
.kopf nav{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1.7rem}
.kopf nav a{font-weight:300;font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:.35rem 0;border-bottom:1px solid transparent}
.kopf nav a:hover{color:var(--ink);border-bottom-color:var(--warm)}
.kopf nav a.k-knopf{padding:.55rem 1rem;border:1px solid var(--warm);color:var(--ink)}
.kopf nav a.k-knopf:hover{background:var(--warm);color:#241b0c}
.kopf+p.meta{margin-top:calc(var(--raum-block)*1.4)}
.karte{position:relative;margin:var(--raum-block) 0 0;padding:1.9rem 1.8rem 1.7rem;background:rgba(227,216,180,.05)}
.karte::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--warm) 18%,#fff 50%,var(--warm) 82%,transparent)}
.karte .etikett{font-weight:300;font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--warm);margin:0 0 .7rem}
.karte h2{margin:0 0 .6rem;font-size:var(--t-h4);font-weight:200;color:var(--ink)}
.karte ul{margin:1rem 0 0}
.karte li:last-child{margin-bottom:0}
.karte .cta{margin-top:1.6rem}
@media(max-width:40rem){.wortmarke b{font-size:2.1rem}.kopf nav{gap:.4rem 1.2rem}.karte{padding:1.6rem 1.3rem 1.4rem}.karte .cta{display:block;text-align:center;padding:.95rem .6rem;letter-spacing:.12em}}