/* =========================================================
   Color Glo Switzerland GmbH — öffentliche AGB-Unterschriftsseite

   Die Marke kommt aus color-glo-site/css/style.css: gleiche Farben, gleiche
   Abstandsleiter, gleiche Schrift. Übernommen ist nur, was diese Seite
   braucht — sie ist ein Formular, kein Auftritt, und wird über eine SMS auf
   einem Handy im Hof geöffnet. Darum: keine Animationen, die das Tippen
   stören, keine Schriften von aussen, alles lokal.
   ========================================================= */

/* ---------- 1. Marken-Werte ---------- */
:root{
  --ink:        #08090b;
  --ink-2:      #101216;
  --paper:      #ffffff;
  --paper-2:    #f4f4f6;
  --paper-3:    #e9e9ee;

  --brand:      #e63312;
  --brand-2:    #ff7a1a;
  --brand-soft: #ff9d4d;
  --grad:       linear-gradient(100deg, #e63312 0%, #ff5a14 45%, #ff7a1a 100%);
  --grad-soft:  linear-gradient(100deg, rgba(230,51,18,.16), rgba(255,122,26,.16));

  --txt:        #14161a;
  --txt-2:      #55595f;
  --txt-3:      #82868d;
  --txt-l:      #ffffff;
  --txt-l2:     rgba(255,255,255,.72);
  --txt-l3:     rgba(255,255,255,.5);

  --line:       rgba(10,12,16,.10);
  --line-2:     rgba(10,12,16,.18);

  --rot:        #c62f13;   /* Fehlertext — dunkler als --brand, damit er auf
                              Weiss die Kontrastschwelle sicher nimmt */
  --gruen:      #1c7a45;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-full:999px;

  --wrap: 760px;   /* schmaler als die Website: ein Formular liest sich in einer
                      Spalte besser, und auf dem Tablet steht es nicht auseinander */

  --shadow-sm: 0 2px 10px rgba(8,9,11,.06);
  --shadow-md: 0 14px 40px rgba(8,9,11,.10);
  --shadow-brand: 0 14px 34px rgba(230,51,18,.30);

  --ease: cubic-bezier(.22,.61,.36,1);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", system-ui, sans-serif;
}

/* ---------- 2. Grundgerüst ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  color:var(--txt);
  background:var(--paper-2);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;}
[hidden]{display:none !important;}
a{color:inherit;}
button,input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:800;}
p{margin:0;}
address{font-style:normal;}

::selection{background:var(--brand);color:#fff;}
:focus-visible{outline:3px solid var(--brand-2);outline-offset:3px;border-radius:6px;}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s4);}

.sprung{
  position:fixed;left:var(--s4);top:-100px;z-index:50;
  background:var(--brand);color:#fff;padding:12px 18px;border-radius:var(--r-sm);
  text-decoration:none;transition:top .25s var(--ease);
}
.sprung:focus{top:var(--s4);}

/* ---------- 3. Kopf ---------- */
.kopf{
  background:var(--ink);
  color:var(--txt-l);
  padding-block:var(--s6) var(--s7);
  /* Der Farbverlauf der Marke als schmale Kante — mehr Auftritt braucht ein
     Formular nicht, und es bleibt ohne Bilddatei. */
  border-bottom:4px solid transparent;
  border-image:var(--grad) 1;
}
.kopf__inner{display:grid;gap:var(--s4);}
.kopf__logo{height:44px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));}
.kopf__titel{font-size:clamp(1.7rem,6vw,2.5rem);}
.kopf__lead{color:var(--txt-l2);font-size:1rem;max-width:56ch;}
.kopf__lead strong{color:#fff;}

/* ---------- 4. Karten ---------- */
.haupt{padding-block:var(--s6) var(--s8);}
.formular{display:grid;gap:var(--s5);}

.karte{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:clamp(20px,4vw,34px);
}
.karte__titel{
  display:flex;align-items:center;gap:var(--s3);
  font-size:clamp(1.15rem,3.6vw,1.4rem);
  margin-bottom:var(--s3);
}
.karte__nr{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--grad);color:#fff;
  font-size:.95rem;font-weight:800;letter-spacing:0;
  /* Eigener, enger Schatten statt --shadow-brand: der grosse Schein des
     Absendeknopfes würde hier über den Kartenrand hinauslaufen und wie ein
     Fleck neben der Karte aussehen. */
  box-shadow:0 5px 14px rgba(230,51,18,.30);
}
.karte__lead{color:var(--txt-2);font-size:.95rem;margin-bottom:var(--s5);}

/* ---------- 5. Felder ---------- */
.reihe{display:grid;gap:0;grid-template-columns:1fr;}
.feld{display:grid;gap:6px;margin-bottom:var(--s4);}
.feld label{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:.85rem;font-weight:700;letter-spacing:.02em;color:var(--txt-2);
}
.pflicht{color:var(--brand);font-weight:800;}
.freiwillig{
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-3);
}
.feld input{
  width:100%;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--paper-2);border:1px solid var(--line-2);
  font-size:1rem;
  transition:border-color .2s, background-color .2s, box-shadow .2s;
  appearance:none;-webkit-appearance:none;
  /* iOS zoomt beim Fokus, sobald die Schrift unter 16px liegt — 1rem = 17px
     hält den Ausschnitt ruhig, während der Kunde tippt. */
  min-height:52px;
}
.feld input:focus{
  outline:none;background:#fff;border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(230,51,18,.14);
}
.feld input[type="date"]{min-height:52px;}
.feld__hilfe{font-size:.8rem;color:var(--txt-3);}

.feld.ist-falsch input{border-color:var(--rot);background:rgba(230,51,18,.05);}
.feld .fehler{font-size:.82rem;font-weight:600;color:var(--rot);}

/* ---------- 6. AGB-Kasten ---------- */
.agb{
  max-height:min(46vh, 380px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* Hält den Wisch im Kasten: ohne das scrollt am Ende der Liste die ganze
     Seite weiter und der Kunde verliert die Stelle. */
  overscroll-behavior:contain;
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  padding:var(--s4) var(--s5);

  /* Rollschatten oben und unten. Auf dem Handy blendet sich der Rollbalken
     weg, sobald man den Finger hebt — ohne diesen Schatten sähe der Kasten aus
     wie ein zu Ende gelesener Text, und der Kunde bestätigte AGB, von denen er
     einen Absatz gesehen hat.
     Die beiden ersten Ebenen sind Deckel in Kastenfarbe und rollen mit
     (`local`), die beiden dahinter sind die Schatten und bleiben stehen
     (`scroll`). Am Anfang und am Ende schiebt sich der Deckel über den
     Schatten — er erscheint also genau dann, wenn es dort noch weitergeht. */
  background-color:var(--paper-2);
  background-image:
    linear-gradient(var(--paper-2) 30%, rgba(244,244,246,0)),
    linear-gradient(rgba(244,244,246,0), var(--paper-2) 70%),
    radial-gradient(farthest-side at 50% 0,   rgba(10,12,16,.16), rgba(10,12,16,0)),
    radial-gradient(farthest-side at 50% 100%,rgba(10,12,16,.16), rgba(10,12,16,0));
  background-position:0 0, 0 100%, 0 0, 0 100%;
  background-size:100% 26px, 100% 26px, 100% 12px, 100% 12px;
  background-repeat:no-repeat;
  background-attachment:local, local, scroll, scroll;
}
.agb:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px;}
.agb__inhalt{display:grid;gap:var(--s3);}
.agb__inhalt h3{
  font-size:.95rem;font-weight:800;color:var(--txt);
  margin-top:var(--s3);
}
.agb__inhalt h3:first-child{margin-top:0;}
.agb__inhalt p{font-size:.9rem;line-height:1.62;color:var(--txt-2);}
.agb__fuss{margin-top:var(--s3);font-size:.8rem;color:var(--txt-3);}

/* Ein Farbverlauf-Strich als Scrollbalken — dieselbe Marke wie auf der
   Website, ohne dass der Kasten bunt wird. */
.agb::-webkit-scrollbar{width:10px;}
.agb::-webkit-scrollbar-track{background:transparent;}
.agb::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#e63312,#ff7a1a);
  border-radius:99px;border:3px solid var(--paper-2);
}
.agb{scrollbar-color:#e63312 transparent;scrollbar-width:thin;}

/* ---------- 7. Häkchen ---------- */
.haken{
  position:relative;   /* hält das versteckte Kästchen im Kasten, siehe unten */
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--s3);
  align-items:start;
  padding:var(--s4);
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  background:var(--paper-2);
  cursor:pointer;
  transition:border-color .2s, background-color .2s;
}
.haken + .haken{margin-top:var(--s3);}
.haken:hover{background:#fff;}

/* Gesetzt-Zustand doppelt geführt: `.ist-an` setzt das Modul bei jedem
   Umschalten, `:has()` fängt den Fall ab, dass ein Browser das Häkchen ohne
   unser Zutun bewegt (Zurücktaste, Autofill). Bewusst zwei getrennte Regeln —
   in einer Liste würde ein Browser ohne `:has()` auch `.ist-an` verwerfen. */
.haken.ist-an{border-color:var(--brand);background:rgba(230,51,18,.045);}
.haken:has(input:checked){border-color:var(--brand);background:rgba(230,51,18,.045);}

/* Das echte Kästchen bleibt bedienbar und für Vorlesesoftware sichtbar, wird
   aber nicht angezeigt — gezeichnet wird .haken__kasten, weil sich ein
   natives Kästchen nicht gross genug für einen Daumen machen lässt. */
.haken input{
  position:absolute;opacity:0;width:1px;height:1px;
  margin:0;pointer-events:none;
}
.haken__kasten{
  flex:none;width:30px;height:30px;margin-top:1px;
  border-radius:9px;
  border:2px solid var(--line-2);
  background:#fff;
  display:grid;place-items:center;
  transition:background-color .18s, border-color .18s;
}
.haken__kasten::after{
  content:"";
  width:15px;height:9px;
  border-left:3px solid #fff;border-bottom:3px solid #fff;
  transform:rotate(-45deg) translate(1px,-2px) scale(.4);
  opacity:0;
  transition:opacity .15s, transform .18s var(--ease);
}
.haken.ist-an .haken__kasten{background:var(--brand);border-color:var(--brand);}
.haken.ist-an .haken__kasten::after{opacity:1;transform:rotate(-45deg) translate(1px,-2px) scale(1);}
.haken:has(input:checked) .haken__kasten{background:var(--brand);border-color:var(--brand);}
.haken:has(input:checked) .haken__kasten::after{opacity:1;transform:rotate(-45deg) translate(1px,-2px) scale(1);}

/* Das Kästchen liegt unsichtbar hinter der gezeichneten Fläche — die Tastatur
   muss trotzdem sehen, wo sie steht. */
.haken:has(input:focus-visible) .haken__kasten{outline:3px solid var(--brand-2);outline-offset:3px;}

.haken__text{display:grid;gap:6px;font-size:.92rem;line-height:1.55;}
.haken__marke{
  justify-self:start;
  font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-full);
}
.haken__marke--pflicht{background:var(--grad);color:#fff;}
.haken__marke--frei{background:var(--paper-3);color:var(--txt-2);}
.haken__hilfe{font-size:.82rem;color:var(--txt-3);}

.haken.ist-falsch{border-color:var(--rot);background:rgba(230,51,18,.05);}
.haken.ist-falsch .haken__kasten{border-color:var(--rot);}

/* ---------- 8. Unterschrift ---------- */
.sig{
  position:relative;
  border:2px dashed var(--line-2);
  border-radius:var(--r-md);
  background:#fff;
  overflow:hidden;
}
.sig.ist-falsch{border-color:var(--rot);border-style:solid;}
.sig.hat-strich{border-style:solid;border-color:var(--line-2);}
.sig__feld{
  display:block;
  width:100%;
  height:190px;
  /* Ohne das rollt die Seite unter dem zeichnenden Finger weg — der wichtigste
     Wert auf dieser ganzen Seite. */
  touch-action:none;
  cursor:crosshair;
}
.sig__linie{
  position:absolute;left:8%;right:8%;bottom:44px;
  height:1px;background:var(--line-2);pointer-events:none;
}
.sig__platzhalter{
  position:absolute;left:0;right:0;bottom:14px;
  text-align:center;pointer-events:none;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-3);
  transition:opacity .2s;
}
.sig.hat-strich .sig__platzhalter{opacity:0;}

.sig__leiste{
  display:flex;flex-wrap:wrap;gap:var(--s3);
  align-items:center;justify-content:space-between;
  margin-top:var(--s3);
}
.sig__ort{
  text-align:right;font-size:.88rem;color:var(--txt-2);
  display:grid;gap:2px;
}
.sig__ort strong{font-weight:700;color:var(--txt);}
.sig__name{color:var(--txt-3);}
.sig__name.ist-gesetzt{color:var(--txt);font-weight:600;}

/* ---------- 9. Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;cursor:pointer;
  border-radius:var(--r-full);
  padding:14px 24px;min-height:52px;
  font-weight:700;font-size:.98rem;letter-spacing:.01em;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), background-color .2s, opacity .2s;
}
.knopf--voll{background:var(--grad);color:#fff;box-shadow:var(--shadow-brand);}
.knopf--voll:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(230,51,18,.38);}
.knopf--voll:active{transform:translateY(0);}
.knopf--gross{width:100%;padding:18px 24px;min-height:60px;font-size:1.05rem;}
.knopf--leise{
  background:var(--paper-2);color:var(--txt-2);
  border:1px solid var(--line-2);
}
.knopf--leise:hover{background:var(--paper-3);color:var(--txt);}
.knopf[disabled]{opacity:.55;cursor:progress;transform:none;box-shadow:var(--shadow-sm);}

/* ---------- 10. Absenden und Meldungen ---------- */
.senden{display:grid;gap:var(--s3);}
.senden__note{font-size:.8rem;color:var(--txt-3);text-align:center;}

.meldung{
  padding:var(--s4);border-radius:var(--r-md);
  font-size:.92rem;font-weight:600;
  background:rgba(230,51,18,.08);
  border:1px solid rgba(230,51,18,.32);
  color:var(--rot);
}
.hinweis{padding:var(--s4);border-radius:var(--r-md);font-size:.92rem;margin-bottom:var(--s5);}
.hinweis--warn{background:#fff4e5;border:1px solid #f0c68a;color:#7a4a06;}

/* ---------- 11. Bestätigungsansicht ---------- */
.danke{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  padding:clamp(24px,5vw,44px);
  display:grid;gap:var(--s4);justify-items:center;text-align:center;
}
.danke__ico{
  width:66px;height:66px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--grad);color:#fff;
  font-size:1.8rem;font-weight:800;
  box-shadow:var(--shadow-brand);
}
.danke__titel{font-size:clamp(1.35rem,4.6vw,1.8rem);}
.danke__titel:focus{outline:none;}
.danke__lead{color:var(--txt-2);font-size:.96rem;max-width:46ch;}

.danke__liste{
  margin:0;width:100%;text-align:left;
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--line);
}
.danke__liste dt{
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-3);padding-top:var(--s3);
}
.danke__liste dd{
  margin:0;padding-bottom:var(--s3);
  border-bottom:1px solid var(--line);
  font-size:.96rem;font-weight:600;
}
.danke__liste dd.ist-ja{color:var(--gruen);}
.danke__liste dd.ist-nein{color:var(--txt-3);font-weight:500;}

.danke__sig{display:grid;gap:8px;justify-items:center;width:100%;}
.danke__sig-l{
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-3);
}
.danke__sig img{
  width:100%;max-width:340px;height:auto;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
}

/* ---------- 12. Fuss ---------- */
.fuss{background:var(--ink);color:var(--txt-l2);padding-top:var(--s7);}
.fuss__inner{
  display:grid;gap:var(--s5);grid-template-columns:1fr;
  padding-bottom:var(--s6);
}
.fuss__marke img{height:40px;width:auto;object-fit:contain;}
.fuss__adresse{display:grid;gap:4px;font-size:.94rem;}
.fuss__adresse strong{color:#fff;font-weight:700;}
.fuss__adresse a{color:var(--txt-l2);text-decoration:none;transition:color .2s;}
.fuss__adresse a:hover{color:var(--brand-soft);}
.fuss__bar{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  justify-content:space-between;align-items:center;
  padding-block:var(--s4);
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.82rem;color:var(--txt-l3);
}

/* ---------- 13. Ab Tablet zweispaltig ---------- */
@media (min-width:620px){
  .wrap{padding-inline:var(--s5);}
  .reihe{grid-template-columns:1fr 1fr;gap:var(--s4);}
  .danke__liste{grid-template-columns:auto 1fr;column-gap:var(--s5);}
  .danke__liste dt{padding-block:var(--s3);border-bottom:1px solid var(--line);}
  .danke__liste dd{padding-block:var(--s3);}
  .fuss__inner{grid-template-columns:1fr auto;align-items:center;}
  .fuss__adresse{text-align:right;}
  .sig__feld{height:220px;}
}

/* ---------- 14. Rücksichten ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* Ausdruck: der Kunde soll seine Bestätigung sauber auf Papier bringen
   können — dunkle Flächen und Knöpfe haben darauf nichts verloren. */
@media print{
  body{background:#fff;font-size:11pt;}
  .kopf,.fuss{background:#fff !important;color:#000 !important;border:0;}
  .kopf__lead,.fuss__adresse{color:#333 !important;}
  .kopf__logo,.fuss__marke img{filter:none;}
  .sprung,.knopf,.senden__note,.meldung{display:none !important;}
  .karte,.danke{box-shadow:none;border:1px solid #bbb;break-inside:avoid;}
  .agb{max-height:none;overflow:visible;}
}