/* Toolbox — dieselbe Bildsprache wie larsdargel.de: "Papier & Blitz".
   Farben und Schriftregeln sind aus stil.css der Webseite uebernommen,
   damit beides als ein Haus wirkt. */

:root{
  --papier:#DCD9D2;
  --papier-2:#D2CEC6;
  --tinte:#171614;
  --schwarz:#0A0908;
  --blitz:#EF6436;
  --blitz-dunkel:#D6522A;
  --staub:#8E877C;
  --linie:rgba(23,22,20,.18);
  --linie-zart:rgba(23,22,20,.09);

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;

  --rand:clamp(18px,5vw,44px);
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* viewport-fit=cover: unter der Statusleiste des iPhones nichts verstecken */
  padding:max(env(safe-area-inset-top),18px) var(--rand)
          max(env(safe-area-inset-bottom),40px);
}
.blatt{width:100%;max-width:820px;margin:0 auto}

a{color:inherit}
:focus-visible{outline:2px solid var(--blitz);outline-offset:3px}

/* ---------- Kopf ---------- */

.kopf{display:flex;align-items:center;gap:12px;margin-bottom:34px}
.kopf img{width:34px;height:34px;display:block}
.wortmarke{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.kopf .zurueck{
  margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--staub);
  text-decoration:none;
}
.kopf .zurueck:hover{color:var(--blitz)}

.marke-klein{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blitz);margin:0 0 8px;
}
.anzeige{
  font-variation-settings:"wdth" 125,"wght" 800;
  text-transform:uppercase;letter-spacing:-.035em;line-height:.86;
  margin:0 0 30px;font-size:clamp(34px,8vw,62px);
}
.akzent-wort{color:var(--blitz)}

/* ---------- Kacheln ---------- */

.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie)}
.kachel{
  display:flex;flex-direction:column;gap:9px;
  background:var(--papier);padding:22px 20px 24px;
  text-decoration:none;color:inherit;
  transition:background .15s ease;
  min-height:150px;
}
.kachel:hover{background:var(--papier-2)}
.kachel:active{background:var(--papier-2)}
.kachel svg{width:26px;height:26px;stroke:var(--blitz);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kachel-name{
  font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;margin-top:auto;
}
.kachel-text{font-size:13.5px;line-height:1.45;color:var(--staub);margin:0}
.kachel-extern .kachel-name::after{content:" ↗";color:var(--staub)}

.leer{
  grid-column:1/-1;background:var(--papier);padding:34px 20px;text-align:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--staub);
}

/* ---------- Hinweis unten ---------- */

.fussnote{
  margin-top:30px;font-family:var(--mono);font-size:11px;line-height:1.7;
  color:var(--staub);letter-spacing:.03em;
}

/* ---------- Formulare / Stammdaten ---------- */

.reiter{display:flex;flex-wrap:wrap;gap:1px;background:var(--linie);
  border:1px solid var(--linie);margin-bottom:26px}
.reiter button{
  flex:1 1 auto;background:var(--papier);border:0;cursor:pointer;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--staub);
  padding:13px 12px;transition:background .15s,color .15s;
}
.reiter button:hover{background:var(--papier-2);color:var(--tinte)}
.reiter button[aria-selected="true"]{background:var(--tinte);color:var(--papier)}

.eintrag{border:1px solid var(--linie);margin-bottom:12px;background:var(--papier)}
.eintrag>summary{
  cursor:pointer;padding:14px 16px;display:flex;align-items:baseline;gap:6px 12px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  list-style:none;
}
.eintrag>summary::-webkit-details-marker{display:none}
.eintrag>summary::before{content:"+";color:var(--blitz);font-weight:600;width:11px}
.eintrag[open]>summary::before{content:"–"}
.eintrag[open]>summary{border-bottom:1px solid var(--linie-zart);background:var(--papier-2)}
/* Der Titel nimmt den Platz zwischen Marke und Nebenangabe und bricht in
   sich um. Grundbreite 0 ist der Kniff: mit "auto" waere sie so breit wie der
   ganze Firmenname, und die Zeile bräche um, bevor ueberhaupt geschrumpft wird.
   min-width:0 hebt zusaetzlich die Mindestbreite von Flex-Elementen auf. */
.eintrag .titel{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
.eintrag .neben{color:var(--staub);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;margin-left:auto;white-space:nowrap;
  /* Der Titel darf schrumpfen, die Nebenangabe nicht. */
  flex:0 0 auto}
.eintrag-inhalt{padding:18px 16px}

.gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px 20px}
.feld{display:flex;flex-direction:column;gap:6px}
.feld-breit{grid-column:1/-1}
.feld label{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--staub);
}
.feld input,.feld textarea,.feld select{
  font-family:var(--mono);font-size:13.5px;line-height:1.5;color:var(--tinte);
  background:transparent;border:0;border-bottom:1px solid var(--linie);
  padding:8px 0;border-radius:0;width:100%;
}
.feld textarea{border:1px solid var(--linie);padding:11px;resize:vertical;
  min-height:110px;line-height:1.6}
.feld select{border-bottom:1px solid var(--linie);padding-right:18px}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:0;border-color:var(--blitz)}
.feld input::placeholder,.feld textarea::placeholder{color:#B0A99E}

.knoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.knopf{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  background:var(--blitz);color:#fff;padding:11px 18px;border:0;cursor:pointer;
  transition:background .2s;
}
.knopf:hover{background:var(--blitz-dunkel)}
.knopf.stumm{background:transparent;color:var(--tinte);
  border:1px solid var(--tinte);padding:10px 18px}
.knopf.stumm:hover{background:var(--tinte);color:var(--papier)}
.knopf.gefahr{background:transparent;color:var(--staub);border:1px solid var(--linie)}
.knopf.gefahr:hover{background:#B3402070;color:var(--tinte);border-color:var(--blitz)}
.knopf[disabled]{opacity:.45;pointer-events:none}

.meldung{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--staub);min-height:1.4em;
}
.meldung.gut{color:var(--blitz)}
.meldung.schlecht{color:#A32C10}

.hinweis{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--staub);
  margin:0 0 20px;letter-spacing:.02em}
.verstecken{display:none !important}