/* 3D-COPYSHOP — eigener Auftritt des Strangs (Träger: Schicht-Werk).
   Quelle: INTERN/copyshop/strang.css — wird von baue-copyshop-strang.py nach COPYSHOP_SITE kopiert.
   Vorbild ist der klassische Copyshop: Papierweiß, Druckerschwarz, Signalgelb, große Ziffern, eine Leistungstafel.
   Teil 1 stellt die Farbwerte der Hauptseite auf hell um (gilt für Auftrag, Lizenzprüfer, Rechtstexte).
   Teil 2 ist die Gestaltung der eigenen Startseite und der gemeinsamen Kopf- und Fußzeile. */

/* ── Teil 1: Farbwerte ─────────────────────────────────────────────────────────────────────────── */
:root{
  --bg:#faf8f3;--s:#ffffff;--s2:#f3f0e8;--b:#d8d3c7;--b2:#c4bfb2;
  --gold:#6f4a00;--gold-hell:#8a5d00;--gold-tief:#573a00;--gf:#fff3bf;
  --gl:#e9dfc0;--gd:rgba(255,210,31,.18);--gold-dim:rgba(255,210,31,.25);--gold-glow:rgba(255,210,31,.12);
  --t:#3b3832;--t2:#55514a;--t3:#69655d;--w:#141414;--br:#000000;
  --warn:#a52a2a;--gut:#1f6b43;--warn-f:#fbe9e7;--achtung-f:#fff3bf;--gut-f:#e6f3ea;--focus:rgba(20,20,20,.55);
  --surface:#ffffff;--surface2:#f3f0e8;--border:#d8d3c7;--border2:#c4bfb2;--text:#3b3832;--text2:#55514a;--text3:#69655d;--white:#141414;--bright:#000000;
  --sig:#ffd21f;--tinte:#141414;
}
body{background:var(--bg);color:var(--t);font-weight:400;}
body::after{display:none;}
a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--tinte);outline-offset:2px;}
.skip{background:var(--sig);color:#000;}
h1,h2,h3{color:var(--w);}
.lead{color:var(--t);}

/* Feste Dunkelwerte der übernommenen Seiten auf hell stellen */
.cta,.cta2 a{background:var(--s)!important;border:2px solid var(--tinte)!important;color:var(--tinte)!important;text-decoration:none;font-weight:500;}
.cta:hover,.cta2 a:hover,.cta2 a.voll{background:var(--sig)!important;color:var(--tinte)!important;}
.cs-drop{display:block;background:#fffbe6!important;border:2px dashed var(--tinte)!important;color:var(--w);}
.cs-drop.aktiv{background:var(--sig)!important;}
.cs-modus{border:2px solid var(--tinte)!important;}
.cs-modus button{color:var(--t)!important;}
.cs-modus button[aria-pressed=true]{background:var(--sig)!important;color:var(--tinte)!important;}
.cs-hin{background:var(--gf)!important;border-left-color:var(--tinte)!important;color:var(--t);}
.cs-hin.warn{background:var(--warn-f)!important;border-left-color:var(--warn)!important;}
.cs-kenn .gut span{color:var(--gut)!important;}.cs-kenn .warn span{color:var(--warn)!important;}
.cs-skala b{color:var(--w)!important;}
.cs-skala input[type=range],.mb-f input[type=radio],.mb-f input[type=checkbox]{accent-color:#141414!important;}
.mb-vor{background:var(--s)!important;color:var(--t);}
.mb-vor b{color:var(--w)!important;font-weight:500!important;}
.mb-f input[type=text],.mb-f input[type=url],.mb-f input[type=email],.mb-f input[type=number],.mb-f textarea,.mb-f select,.cs-exp select,.cs-exp input[type=number]{background:var(--s)!important;color:var(--w)!important;border:1px solid var(--b2)!important;}
table.mb-s td{border-bottom-color:var(--b)!important;}
.card{border-left-color:var(--tinte);}
.mb-w .w1{border-top-color:var(--tinte);}
.mb-weg button[aria-selected=true],.mb-chip[aria-pressed=true]{border-color:var(--tinte)!important;color:var(--tinte)!important;background:var(--sig)!important;}
button.voll,a.voll,.voll{background:var(--sig)!important;color:var(--tinte)!important;border-color:var(--tinte)!important;}
/* Einfach/Profi-Schalter (modus.js) und Absendeknopf der Auftragsseite */
#sw-modus{background:var(--s)!important;border:2px solid var(--tinte)!important;}
#sw-modus button{color:var(--t)!important;}
#sw-modus button.an{background:var(--sig)!important;color:var(--tinte)!important;}
#senden{background:var(--sig)!important;box-shadow:3px 3px 0 var(--tinte);font-size:.95rem!important;padding:12px 22px!important;}
/* Stufenband (stufen.js setzt feste Dunkelwerte in der Zeile) */
[data-sw-stufe]{background:var(--gf)!important;color:var(--t)!important;border-bottom:1px solid var(--b2)!important;border-left:6px solid var(--tinte)!important;font-size:12px!important;}
[data-sw-stufe] b,[data-sw-stufe] a{color:var(--tinte)!important;}

/* Sprachleiste (wissen/lang.js): strang.js hängt sie in die Kopfzeile; ohne Skript steht sie darüber */
.lang{position:static;display:flex;gap:4px;justify-content:flex-end;background:var(--s);border:0;padding:6px 16px 0;margin:0;}
.cs-kopf .in .lang{padding:0;background:none;}
.lang button,.lang select{background:var(--s);border:1px solid var(--b2);color:var(--t);font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;padding:5px 8px;cursor:pointer;}
.lang button.on{background:var(--tinte);color:#fff;border-color:var(--tinte);}
.lang select{max-width:56px;}

/* ── Teil 2: Kopfzeile, Startseite, Fuß ────────────────────────────────────────────────────────── */
.cs-kopf{background:var(--s);border-bottom:3px solid var(--tinte);position:relative;z-index:50;}
.cs-kopf .in{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap;}
.cs-marke{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--tinte);}
.cs-marke svg{width:40px;height:40px;flex:none;}
.cs-marke b{display:block;font-size:1.12rem;font-weight:500;letter-spacing:.04em;line-height:1.1;}
.cs-marke b i{font-style:normal;background:var(--sig);padding:0 4px;margin-left:1px;}
.cs-marke small{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;color:var(--t2);text-transform:uppercase;margin-top:2px;}
.cs-leiste{display:flex;gap:4px 18px;flex-wrap:wrap;margin-left:auto;align-items:center;}
.cs-leiste a{color:var(--tinte);text-decoration:none;font-size:.86rem;padding:6px 0;border-bottom:3px solid transparent;}
.cs-leiste a:hover,.cs-leiste a[aria-current=page]{border-bottom-color:var(--sig);opacity:1;}
.cs-leiste a.knopf,.cs-knopf{background:var(--sig);border:2px solid var(--tinte);color:var(--tinte);padding:9px 16px;font-weight:500;text-decoration:none;display:inline-block;font-size:.9rem;box-shadow:3px 3px 0 var(--tinte);transition:transform .12s ease,box-shadow .12s ease;}
.cs-leiste a.knopf:hover,.cs-knopf:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tinte);opacity:1;border-bottom-color:var(--tinte);}
.cs-knopf.gross{font-size:1.02rem;padding:13px 22px;}
.cs-zweit{color:var(--tinte);font-size:.92rem;text-underline-offset:4px;}

.cs-seite{max-width:1120px;margin:0 auto;padding:0 20px 40px;}
.cs-held{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px;align-items:center;padding:54px 0 46px;}
.cs-held h1{font-size:clamp(2.3rem,6.2vw,4.3rem);line-height:1.02;font-weight:500;letter-spacing:-.02em;color:var(--tinte);margin:0 0 20px;}
.cs-held h1 span.z{display:block;}
.cs-held h1 span.m{background:linear-gradient(transparent 58%,var(--sig) 58%);padding:0 .08em;margin-left:-.08em;}
.cs-held p.zeile{font-size:1.08rem;line-height:1.65;max-width:34em;margin:0 0 24px;color:var(--t);}
.cs-held .tun{display:flex;gap:14px 22px;flex-wrap:wrap;align-items:center;}
.cs-merk{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 0;padding:0;list-style:none;}
.cs-merk li{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--tinte);padding:5px 9px;color:var(--tinte);background:var(--s);}

.cs-zettel{background:var(--s);border:2px solid var(--tinte);box-shadow:8px 8px 0 var(--sig);padding:20px 22px 16px;font-family:var(--mono);transform:rotate(1.4deg);max-width:380px;justify-self:center;width:100%;}
.cs-zettel .kopf{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--tinte);padding-bottom:8px;margin-bottom:6px;}
.cs-zettel .kopf b{font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--tinte);}
.cs-zettel .kopf span{font-size:.6rem;color:var(--t2);letter-spacing:.1em;}
.cs-zettel dl{margin:0;}
.cs-zettel .z{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed var(--b2);font-size:.82rem;}
.cs-zettel dt{color:var(--t2);}
.cs-zettel dd{margin:0;color:var(--tinte);text-align:right;}
.cs-zettel .fuss{font-size:.58rem;letter-spacing:.08em;color:var(--t2);margin-top:10px;text-transform:uppercase;}
.cs-zettel .loch{display:flex;gap:10px;margin:-6px 0 12px;}
.cs-zettel .loch i{width:10px;height:10px;border-radius:50%;border:2px solid var(--tinte);background:var(--bg);display:block;}

.cs-abschnitt{padding:38px 0;border-top:1px solid var(--b);scroll-margin-top:12px;}
.cs-abschnitt>h2{font-size:1.5rem;font-weight:500;color:var(--tinte);margin:0 0 20px;letter-spacing:-.01em;}
.cs-abschnitt>h2::before{content:"";display:inline-block;width:14px;height:14px;background:var(--sig);border:2px solid var(--tinte);margin-right:11px;vertical-align:-1px;}

.cs-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;counter-reset:s;}
.cs-schritte li{counter-increment:s;background:var(--s);border:2px solid var(--tinte);padding:18px 18px 20px;position:relative;}
.cs-schritte li::before{content:counter(s);display:block;font-size:3.4rem;line-height:1;font-weight:500;color:var(--tinte);margin-bottom:10px;background:linear-gradient(transparent 62%,var(--sig) 62%);width:max-content;padding:0 .12em;}
.cs-schritte b{display:block;font-size:1.08rem;font-weight:500;color:var(--tinte);margin-bottom:6px;}
.cs-schritte p{font-size:.9rem;line-height:1.6;margin:0;color:var(--t);}

.cs-tafel{background:#141414;color:#f4f1ea;border:2px solid var(--tinte);padding:6px 20px 14px;box-shadow:8px 8px 0 var(--sig);}
.cs-tafel table{width:100%;border-collapse:collapse;font-size:.92rem;}
.cs-tafel th{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sig);text-align:left;padding:14px 10px 10px;border-bottom:2px solid var(--sig);font-weight:400;background:none;}
.cs-tafel td{padding:12px 10px;border-bottom:1px solid #3a3833;vertical-align:top;line-height:1.5;color:#f4f1ea;}
.cs-tafel td:first-child{font-weight:500;color:#fff;white-space:normal;}
.cs-tafel td.a{color:#cfcabf;}
.cs-tafel td.k{font-family:var(--mono);font-size:.76rem;color:var(--sig);white-space:nowrap;text-align:right;}
.cs-tafel th:last-child{text-align:right;}
.cs-tafel tr:last-child td{border-bottom:0;}
.cs-tafel-fuss{font-size:.92rem;line-height:1.6;margin:22px 0 0;max-width:46em;color:var(--t);}

.cs-stoffe{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.cs-stoffe div{background:var(--s);border:1px solid var(--b2);border-top:4px solid var(--tinte);padding:14px 16px;}
.cs-stoffe b{display:block;font-size:1rem;font-weight:500;color:var(--tinte);margin-bottom:4px;}
.cs-stoffe span{font-size:.84rem;line-height:1.55;color:var(--t);}

.cs-fuer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.cs-fuer div{background:var(--s2);padding:18px;border-left:4px solid var(--sig);}
.cs-fuer b{display:block;font-size:1.02rem;font-weight:500;color:var(--tinte);margin-bottom:6px;}
.cs-fuer p{font-size:.88rem;line-height:1.6;margin:0 0 8px;color:var(--t);}
.cs-fuer a{font-size:.84rem;color:var(--tinte);}

.cs-fragen details{background:var(--s);border:1px solid var(--b2);margin-bottom:8px;}
.cs-fragen summary{cursor:pointer;padding:14px 44px 14px 16px;font-size:.98rem;font-weight:500;color:var(--tinte);list-style:none;position:relative;}
.cs-fragen summary::-webkit-details-marker{display:none;}
.cs-fragen summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:1.3rem;line-height:1;font-weight:400;}
.cs-fragen details[open] summary::after{content:"–";}
.cs-fragen details[open] summary{border-bottom:1px solid var(--b);}
.cs-fragen details p{padding:12px 16px 16px;margin:0;font-size:.92rem;line-height:1.65;color:var(--t);max-width:52em;}

.cs-schluss{background:var(--sig);border:2px solid var(--tinte);padding:28px 26px;display:flex;gap:18px 30px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:10px 0 0;}
.cs-schluss h2{font-size:1.6rem;font-weight:500;color:var(--tinte);margin:0 0 6px;}
.cs-schluss p{margin:0;font-size:.96rem;color:#2a2620;max-width:34em;line-height:1.55;}
.cs-schluss .cs-knopf{background:var(--tinte);color:#fff;box-shadow:3px 3px 0 #fff;}
.cs-schluss .cs-knopf:hover{box-shadow:1px 1px 0 #fff;}

footer.cs-fuss{background:#141414;color:#d6d1c6;margin-top:46px;border-top:6px solid var(--sig);padding:0;display:block;max-width:none;font-family:var(--sans);letter-spacing:0;text-transform:none;}
.cs-fuss .in{max-width:1120px;margin:0 auto;padding:26px 20px 30px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px 40px;font-size:.84rem;line-height:1.65;}
footer.cs-fuss a{color:#fff;text-decoration:underline;}
footer.cs-fuss div{color:inherit;}
.cs-fuss .recht{display:flex;gap:6px 16px;flex-wrap:wrap;align-content:flex-start;}
footer.cs-fuss .klein{grid-column:1/-1;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:#b3aea3;border-top:1px solid #3a3833;padding-top:14px;}

/* Unterseiten (Auftrag, Lizenzprüfer, Rechtstexte): Inhalt bleibt in der schmalen Spalte der Hauptseite */
.wrap{padding-top:26px;}

@media(max-width:860px){
  .cs-kopf .in{padding:12px 16px 10px;}
  .cs-kopf .in .lang{order:2;margin-left:auto;}
  .cs-leiste{order:3;}
  .cs-leiste{margin-left:0;width:100%;gap:2px 16px;}
  .cs-held{grid-template-columns:1fr;padding:34px 0 34px;gap:30px;}
  .cs-zettel{transform:rotate(.8deg);}
  .cs-schritte,.cs-fuer{grid-template-columns:1fr;}
  .cs-fuss .in{grid-template-columns:1fr;}
  .cs-tafel{padding:4px 10px 10px;box-shadow:5px 5px 0 var(--sig);}
  .cs-tafel table,.cs-tafel tbody,.cs-tafel tr,.cs-tafel td{display:block;width:100%;}
  .cs-tafel thead{display:none;}
  .cs-tafel tr{padding:10px 0;border-bottom:1px solid #3a3833;}
  .cs-tafel tr:last-child{border-bottom:0;}
  .cs-tafel td{border:0;padding:2px 6px;}
  .cs-tafel td.k{text-align:left;padding-top:4px;}
}
@media(prefers-reduced-motion:reduce){.cs-knopf,.cs-leiste a.knopf{transition:none;}.cs-zettel{transform:none;}}