/* ── DAS AUSSEHEN ALLER UNTERSEITEN ───────────────────────────────────────────────────
   Impressum, AGB, Datenschutz — und seit 17.09.2026 auch „Mitmachen".

   Bewusst ohne Baukasten und ohne JavaScript, das den Inhalt baut: diese Seiten muessen
   auch dann stehen, wenn alles andere kaputt ist; sie sind das Erste, was ein Anwalt oder
   eine Behoerde aufruft. Eine Datei, ein <link>, fertig.

   ── ABER SIE MUESSEN AUSSEHEN WIE DIE SEITE ────────────────────────────────────────────
   Ty 17.09.2026: „Wenn man auf Impressum und so klickt, kommt man auf eine Seite, die
   einem keine Option gibt wieder zurueck zu gehen... Auch ist Logo da falsch... Allgemein
   stoert mich, dass dieses Ding nicht aussieht als waere es Teil der Website."

   Dreimal recht, und alle drei hatten dieselbe Ursache: die Seiten waren als Beilage
   gebaut, nicht als Teil. Kein Weg zurueck, ein nachgebautes Logo aus Bild plus Text
   statt des echten, und Farben, die dem Hauptstylesheet nur aehnlich sahen.
   Jetzt: dieselben Farbwerte wie stil.css, dasselbe Logo (eine Bilddatei plus „STUDIO",
   genau wie oben auf der Startseite), eine klebende Kopfzeile mit Abkuerzungen zu den
   anderen Rechtsseiten, und derselbe Fuss wie auf der Startseite. */

:root{
  /* Dieselben Werte wie in site/stil.css. Sie stehen hier ein zweites Mal, weil diese
     Seiten absichtlich nicht vom grossen Stylesheet abhaengen — dafuer muessen sie beim
     Aendern mitgezogen werden. Es sind sieben Zeilen; das ist der Preis dafuer, dass das
     Impressum auch dann laedt, wenn die Startseite es nicht tut. */
  --bg:#0a0812; --bg2:#0f0c1a; --sur2:#1e1930;
  --bd:rgba(255,255,255,.075); --bd2:rgba(255,255,255,.13); --bd3:rgba(255,255,255,.2);
  --tx:#ece9f5; --tx2:#a9a3c0; --tx3:#736d8c;
  --gold:#e0a83c; --gold-hell:#f2c268; --lila:#b56ae6; --lila2:#c58df0; --gruen:#4ade80;
  --weich:cubic-bezier(.22,1,.36,1);

  /* alte Namen, damit der vorhandene Inhalt der Rechtsseiten unveraendert weiterlaeuft */
  --grund:var(--bg); --karte:#141021; --rand:var(--bd2);
  --text:var(--tx); --leise:var(--tx2); --still:var(--tx3);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
html,body{margin:0;padding:0;background:var(--bg);color:var(--tx);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.65}
img{max-width:100%;display:block}

/* ── KOPFZEILE ────────────────────────────────────────────────────────────────────────
   Klebend wie auf der Startseite, gleiche Hoehe, gleicher Unschaerfe-Hintergrund. Die
   Abkuerzungen zu den Nachbarseiten stehen mittig, der Weg zurueck rechts — wer hier
   gelandet ist, wollte eigentlich auf die Website. */
.ukopf{position:sticky;top:0;z-index:70;background:rgba(10,8,18,.78);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--bd)}
.ukopf-mitte{max-width:1180px;margin:0 auto;padding:0 clamp(18px,5vw,64px);
  height:70px;display:flex;align-items:center;gap:18px}
.ulogo{--logo:26px;display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.ulogo img{height:var(--logo);width:auto}
.ulogo i{font-style:normal;white-space:nowrap;font-size:calc(var(--logo) * .38);
  font-weight:700;letter-spacing:.34em;color:var(--gold);margin-right:-.34em}
.ulinks{display:flex;align-items:center;gap:4px;margin:0 auto;min-width:0}
.ulinks a{font-size:13.5px;font-weight:700;color:var(--tx2);text-decoration:none;
  padding:8px 12px;border-radius:10px;white-space:nowrap;transition:color .15s,background .15s}
.ulinks a:hover{color:var(--tx);background:rgba(255,255,255,.05)}
.ulinks a[aria-current="page"]{color:var(--tx);background:rgba(255,255,255,.07)}
.ukopf-rechts{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
.uzurueck{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;
  text-decoration:none;padding:9px 16px;border-radius:11px;
  background:var(--gold);color:#14100a;white-space:nowrap;
  box-shadow:0 6px 22px rgba(224,168,60,.22);transition:transform .18s var(--weich),background .15s}
.uzurueck:hover{background:var(--gold-hell);transform:translateY(-2px)}
/* Am Telefon passen nicht beide Reihen nebeneinander: die Abkuerzungen rutschen unter das
   Logo und werden zu einer wischbaren Reihe. Der Weg zurueck bleibt immer sichtbar —
   genau der hat gefehlt. */
@media(max-width:820px){
  .ukopf-mitte{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:10px;gap:10px}
  .ulinks{order:3;width:100%;margin:0;overflow-x:auto;scrollbar-width:none;
    padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .ulinks::-webkit-scrollbar{display:none}
  .ulinks a{padding:7px 10px;font-size:12.5px}
  .ukopf-rechts{margin-left:auto}
}

.rahmen{max-width:760px;margin:0 auto;padding:44px 20px 40px}
/* Der alte Kopf IM Rahmen ist entfallen — er war das nachgebaute Logo. Die Regel bleibt
   stehen, falls irgendwo noch eine Seite damit kommt; sie faellt dann nicht auseinander. */
.kopf{display:none}

h1{font-size:clamp(28px,4vw,38px);font-weight:800;margin:0 0 8px;letter-spacing:-.6px;line-height:1.15}
.unterzeile{color:var(--tx3);font-size:14px;margin:0 0 34px}
h2{font-size:18px;font-weight:800;margin:38px 0 12px;padding-top:26px;border-top:1px solid var(--bd2)}
h2:first-of-type{border-top:none;padding-top:0}
h3{font-size:15px;font-weight:800;margin:22px 0 7px;color:var(--tx2)}
p,li{font-size:15px;color:var(--tx2);margin:0 0 12px}
strong{color:var(--tx);font-weight:700}
ul{margin:0 0 14px;padding-left:20px}
li{margin-bottom:6px}
a{color:var(--gold)}
a:hover{color:var(--gold-hell)}
table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px}
td{padding:9px 12px 9px 0;vertical-align:top;border-bottom:1px solid var(--bd2);color:var(--tx2)}
td:first-child{width:190px;color:var(--tx3);font-weight:700;font-size:13px}
@media(max-width:560px){
  td{display:block;border:none;padding:0}
  td:first-child{width:auto;padding-top:12px}
  td:last-child{padding-bottom:10px;border-bottom:1px solid var(--bd2)}
}
/* Was noch fehlt, soll weh tun beim Hinsehen — eine halbfertige Pflichtangabe ist
   schlimmer als eine sichtbare Luecke, weil sie niemandem auffaellt. */
.fehlt{display:inline-block;background:rgba(240,120,127,.14);border:1px dashed #f0787f;
  color:#f0787f;font-weight:800;font-size:12.5px;padding:2px 9px;border-radius:7px;
  letter-spacing:.3px}
.hinweis{background:rgba(240,120,127,.08);border:1px solid rgba(240,120,127,.35);
  border-radius:14px;padding:16px 18px;margin:0 0 30px}
.hinweis p{margin:0;color:#f2b6b9;font-size:14px}
.kasten{background:var(--karte);border:1px solid var(--bd2);border-radius:14px;padding:16px 18px;margin:0 0 18px}
.kasten p:last-child{margin-bottom:0}
.en{color:var(--tx3);font-size:13.5px;font-style:italic}

/* ── ZWEI SPRACHEN, GLEICHRANGIG ────────────────────────────────────────────────────────
   Ty 12.09.2026: „Wir richten uns nicht an deutsche, sondern an primär alle. es ist nur
   ein zufall das wir momentan mehr deutschsprachige erreichen."
   Beide Fassungen stehen vollstaendig nebeneinander, die Sprache wird aus dem Browser
   erkannt und laesst sich umschalten. Ohne Speicherung — die Seite legt weiterhin nichts
   auf dem Geraet ab. */
.sprache{display:flex;gap:2px;background:rgba(255,255,255,.04);border:1px solid var(--bd2);
  border-radius:99px;padding:3px}
.sprache button{background:none;border:none;color:var(--tx3);font-size:11.5px;font-weight:800;
  padding:5px 11px;border-radius:99px;cursor:pointer;letter-spacing:.4px;font-family:inherit}
.sprache button[aria-pressed="true"]{background:var(--sur2);color:var(--tx)}
[data-spr]{display:none}
html[lang="de"] [data-spr="de"],
html[lang="en"] [data-spr="en"]{display:block}
/* In einer Reihe (Kopfzeile, Fuss) darf der Sprachschalter nicht zum Block werden. */
html[lang="de"] .sprache [data-spr="de"],
html[lang="en"] .sprache [data-spr="en"],
html[lang="de"] span[data-spr="de"],
html[lang="en"] span[data-spr="en"]{display:inline}

/* ── DER FUSS ─────────────────────────────────────────────────────────────────────────
   Derselbe Aufbau wie auf der Startseite: links wer wir sind, daneben beschriftete
   Spalten, darunter durch eine Linie getrennt die Firmenzeile. */
.ufuss{border-top:1px solid var(--bd);background:var(--bg2);margin-top:60px;
  padding:clamp(40px,6vw,60px) 0 38px}
/* Vier Spalten: Rechtliches, Kontakt, Leistungen, Mitmachen. Am Telefon werden zwei
   daraus — die Regel dafuer steht weiter unten und muss danach stehen, sonst gewinnt
   diese hier (gemessen: vier Spalten zu 52 px auf einem 390 px breiten Schirm). */
.ufuss-mitte{max-width:1180px;margin:0 auto;padding:0 clamp(18px,5vw,64px);
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:36px 22px}
.ufuss-kopf{display:flex;flex-direction:column;gap:9px;min-width:0}
.ufuss-kopf .ulogo{--logo:24px}
.ufuss-satz{font-size:13px;line-height:1.6;color:var(--tx3);max-width:32ch;margin:0}
.ufuss-gruppe{display:flex;flex-direction:column;align-items:flex-start;gap:11px;min-width:0}
.ufuss-titel{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--tx3);opacity:.65}
.ufuss-gruppe a{font-size:13.5px;line-height:1.3;color:var(--tx2);text-decoration:none;
  overflow-wrap:anywhere}
.ufuss-gruppe a:hover{color:var(--tx)}
/* Der Einstieg in den Baukasten. Ty 27.10.2026: „Ich sehe auf diesen seiten immernoch
   kein cms im footer" — richtig: manager.js sucht [data-site-login], und diesen Knopf
   gab es nur im Fuss der Startseite (dort heisst die Klasse fusslogin). Ohne ihn liess
   sich der Baukasten auf /social und /editing gar nicht oeffnen, obwohl die Skripte
   laengst geladen waren. margin-left:auto schiebt ihn nach rechts wie auf der
   Startseite; der Rest nimmt dem <button> nur sein Knopf-Aussehen. */
.ufuss-login{appearance:none;border:0;background:transparent;color:var(--tx3);
  font:inherit;padding:0;cursor:pointer;margin-left:auto;text-align:right}
.ufuss-login:hover{color:var(--tx2)}
.ufuss-unten{max-width:1180px;margin:30px auto 0;padding:18px clamp(18px,5vw,64px) 0;
  border-top:1px solid var(--bd);display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;
  font-size:12px;color:var(--tx3)}
@media(max-width:820px){
  .ufuss-mitte{grid-template-columns:1fr 1fr;gap:28px 18px}
  .ufuss-kopf{grid-column:1 / -1}
}
/* Der alte Fuss der Rechtsseiten — bleibt als Regel bestehen, falls er irgendwo noch
   steht, faellt aber optisch nicht mehr auf. */
.fuss{margin-top:50px;padding-top:22px;border-top:1px solid var(--bd2);
  font-size:13px;color:var(--tx3);display:flex;gap:16px;flex-wrap:wrap}
.fuss a{color:var(--tx3);text-decoration:none}
.fuss a:hover{color:var(--tx2)}

/* ══ „MITMACHEN" ══════════════════════════════════════════════════════════════════════
   Ty 17.09.2026: „Ich wuensche mir einen Bereich wo Leute so maessig sich bewerben
   koennen bei uns, fuer die verschiedensten Sachen... Das soll eine ganz geile
   Unterseite werden."
   Breiter als die Rechtsseiten (die sind auf Lesbarkeit von Fliesstext gebaut, 760 px),
   sonst dieselbe Huelle: gleicher Kopf, gleicher Fuss, gleiche Farben. */
.weit{max-width:1000px}
.uhero{padding:clamp(40px,7vw,78px) 0 10px}
.marke{font-size:11.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--lila2);margin:0 0 12px}
.gross{font-size:clamp(15px,1.6vw,17px);line-height:1.7;color:var(--tx2);max-width:62ch}
.verlauf{background:linear-gradient(100deg,var(--gold) 0%,var(--gold-hell) 38%,var(--lila2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.rollen{display:grid;gap:16px;margin:34px 0 0}
@media(min-width:760px){
  .rollen{grid-template-columns:repeat(3,1fr)}
  /* Zwei Pakete statt drei Rollen — dieselben Karten, nur breiter. */
  .rollen.zwei{grid-template-columns:repeat(2,1fr)}
}

.rolle{display:flex;flex-direction:column;background:var(--karte);border:1px solid var(--bd2);
  border-radius:18px;padding:22px 22px 20px;transition:border-color .2s,transform .2s var(--weich)}
.rolle:hover{border-color:rgba(224,168,60,.4);transform:translateY(-3px)}
.rolle-zeichen{font-size:26px;line-height:1;margin-bottom:12px}
.rolle h3{font-size:17px;margin:0 0 4px;color:var(--tx)}
.rolle-art{font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold);margin:0 0 12px}
.rolle p{font-size:14px;margin:0 0 14px}
.rolle ul{margin:0 0 16px;padding-left:18px}
.rolle li{font-size:13.5px;margin-bottom:5px}
.rolle .knopf{margin-top:auto}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:12px;font-size:14px;font-weight:800;text-decoration:none;
  border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:transform .18s var(--weich),background .15s,border-color .15s,box-shadow .2s}
.knopf:hover{transform:translateY(-2px)}
.knopf.voll{background:var(--gold);color:#14100a;box-shadow:0 6px 22px rgba(224,168,60,.22)}
.knopf.voll:hover{background:var(--gold-hell);color:#14100a}
.knopf.leer{border-color:var(--bd3);color:var(--tx2);background:none}
.knopf.leer:hover{border-color:var(--gold);color:var(--gold)}

/* ── EMPFEHLEN ────────────────────────────────────────────────────────────────────── */
.empfehl{margin:16px 0 0;padding:clamp(22px,3vw,30px);border-radius:20px;
  background:linear-gradient(150deg,rgba(224,168,60,.10),rgba(130,60,200,.09));
  border:1px solid rgba(224,168,60,.32)}
.preisreihe{display:grid;gap:12px;margin:18px 0 20px}
@media(min-width:620px){ .preisreihe{grid-template-columns:1fr 1fr} }
.preiskarte{background:rgba(10,8,18,.5);border:1px solid var(--bd2);border-radius:14px;padding:16px 18px}
.preiskarte b{display:block;font-size:26px;font-weight:800;color:var(--gold);line-height:1.1}
.preiskarte span{display:block;font-size:13px;color:var(--tx2);margin-top:5px}
.schritte{counter-reset:s;list-style:none;padding:0;margin:0 0 6px}
.schritte li{counter-increment:s;position:relative;padding-left:34px;margin-bottom:11px;font-size:14px}
.schritte li::before{content:counter(s);position:absolute;left:0;top:1px;width:23px;height:23px;
  border-radius:50%;background:rgba(224,168,60,.16);border:1px solid rgba(224,168,60,.45);
  color:var(--gold);font-size:12px;font-weight:800;display:grid;place-items:center}

/* ── DAS FORMULAR ─────────────────────────────────────────────────────────────────── */
.formular{margin-top:18px;display:grid;gap:13px}
@media(min-width:620px){ .paar{display:grid;grid-template-columns:1fr 1fr;gap:13px} }
.feld{display:flex;flex-direction:column;gap:6px}
.feld label{font-size:12px;font-weight:800;letter-spacing:.3px;color:var(--tx3)}
.feld input,.feld select,.feld textarea{width:100%;background:var(--sur2);color:var(--tx);
  border:1px solid var(--bd2);border-radius:12px;padding:12px 14px;font-size:14.5px;
  font-family:inherit;line-height:1.5;outline:none;transition:border-color .15s}
.feld textarea{min-height:120px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--gold)}
.feld select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx3) 50%),linear-gradient(135deg,var(--tx3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.klein{font-size:12px;color:var(--tx3);line-height:1.55;margin:0}
.meldung{margin:0;padding:13px 16px;border-radius:12px;font-size:14px;line-height:1.55}
.meldung.gut{background:rgba(74,222,128,.10);border:1px solid rgba(74,222,128,.4);color:#86efac}
.meldung.schlecht{background:rgba(240,120,127,.10);border:1px solid rgba(240,120,127,.4);color:#f2b6b9}
/* Die vorgeschlagene Korrektur ist anklickbar — ein Knopf, der wie Text aussieht.
   Als <button>, nicht als <a>: er fuehrt nirgendwohin, er setzt ein Feld. */
.meldung__fix{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;
  font:inherit;font-weight:800;color:#f7d9a0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.meldung__fix:hover{color:#fff}