/* =================================================================
   Marcel Schreyer – Werkzeugseiten
   Der Rahmen, den jede Werkzeugseite benutzt. Farben, Schriften,
   Pillen, Knöpfe und Fuß kommen aus styles.css, hier steht nur, was
   der Seitentyp zusätzlich braucht. Was ein einzelnes Werkzeug
   ausmacht, steht in dessen eigenem Stylesheet daneben – für den
   UTM-Generator in utm.css.

   Eine Werkzeugseite folgt anderen Regeln als ein Artikel: Ein
   Artikel wird einmal gelesen, ein Werkzeug immer wieder bedient.
   Deshalb kein Rücklink über der Überschrift, ein kürzerer Kopf,
   die Karte breiter als die Lesespalte und das Ergebnis ab 1024px
   Fensterbreite gleichzeitig mit dem Formular im Bild. Der
   Erklärteil unter der Karte kehrt in die Lesespalte zurück.

   A Breite und Kopf · B Umschalter · C Karte und Bühne · D Felder
   E Ergebnis · F Merkliste · G Ergebnisleiste · H Responsive
   ================================================================= */

/* --- A Breite und Kopf der Werkzeugseite ------------------------- */
/* Die Karte läuft auf der Breite des Kartenrasters der Startseite –
   1080px, dieselbe Zahl, keine neue. Der Erklärteil darunter steht in
   seinem eigenen .wrap-read und damit an genau derselben Stelle wie
   der Text auf jeder anderen Seite. */
.wrap-werkzeug{max-width:var(--wrap)}

/* Ohne Rücklink über der Überschrift fehlt der Abstand zur Zeichenzeile
   oben - Seitenzeichen links, Kontaktzeichen rechts. 24px oben setzen die
   Überschrift genau dorthin, wo auf allen anderen Seiten der Rücklink
   steht; ohne sie klebt sie auf dem Handy an den Zeichen. */
.werkzeug-kopf{padding-top:24px;margin-bottom:22px}   /* 24px Abstand zur Zeichenzeile, 22px zur Karte */
/* Kleiner als die Artikelüberschrift: ein Schild über der Maschine,
   kein Plakat. Der Unterschied kostet knapp 20px Höhe und die stehen
   dem ersten Eingabefeld sonst im Weg. */
.werkzeug-kopf h1{
  margin:0;font-size:clamp(1.6rem,3vw,2rem);line-height:1.15;   /* Schriftgröße 25,6px bis 32px */
  font-weight:600;letter-spacing:-.03em;
}
/* Der Satz ist eine Bildunterschrift zur Überschrift, keine Einleitung:
   wer das Werkzeug sucht, weiß, was es macht, und braucht die Erklärung
   nicht über dem ersten Feld. Deshalb 15px statt 17px und in der Farbe
   der Kleinschrift. */
.werkzeug-kopf .lead{
  margin:8px 0 0;                             /* 8px Abstand zur Überschrift */
  font-size:.9375rem;line-height:1.5;color:var(--ink-faint);    /* Schriftgröße 15px */
  max-width:62ch;                             /* sonst läuft die Zeile über die volle Kartenbreite */
}
/* Ab 1024px steht er auf derselben Grundlinie rechts neben der
   Überschrift und kostet dann gar keine eigene Zeile mehr - dieselbe
   Grenze, ab der auch die Bühne zweispaltig wird. Darunter fehlt der
   Platz und er rutscht wieder darunter. */
@media (min-width:1024px){
  .werkzeug-kopf{display:flex;align-items:baseline;gap:20px}   /* 20px zwischen Überschrift und Satz */
  .werkzeug-kopf h1{flex:0 0 auto}
  .werkzeug-kopf .lead{flex:1 1 auto;margin:0;max-width:none}
}

/* --- B Umschalter ------------------------------------------------ */
/* Drei Radiofelder, bedient werden die Beschriftungen. Aussehen und
   Zustand kommen aus .mode und .pill in styles.css, Abschnitt 4.
   Er steht als eigene Zeile oben in der Karte, über beide Spalten:
   er schaltet das Formular um und damit auch das Ergebnis daneben. */
.werkzeug-modi{
  margin:0;flex-wrap:wrap;gap:10px;           /* 10px zwischen den Pillen */
  padding:16px 24px;                          /* 16px oben und unten, 24px seitlich wie die Karte */
  border-bottom:1px solid var(--line);
}

/* --- C Karte und Bühne ------------------------------------------- */
/* Umschalter, Formular, Ergebnis und Merkliste stehen in einer
   gemeinsamen Karte mit einer Außenkante, getrennt nur durch
   Haarlinien bis an die Kartenkante – dieselbe Bauweise wie die
   Matrixkarte auf "Über mich". Die Karte bekommt bewusst kein
   overflow:hidden: das würde das sticky der rechten Spalte abschalten. */
.werkzeug-karte{
  border:1px solid var(--line);border-radius:var(--radius-l);
  background:var(--surface);
}
.werkzeug-formular{padding:22px 24px 24px}   /* 22px oben, 24px seitlich und unten */
.werkzeug-seite{
  padding:20px 24px 24px;               /* 20px oben, 24px seitlich und unten */
  border-top:1px solid var(--line);
}

/* Ab 1024px Fensterbreite zwei Spalten. Die Trennlinie sitzt als
   border-right am Formular und nicht als border-left an der rechten
   Spalte: das Formular ist die Spalte, die das Raster auf die volle
   Höhe streckt, deshalb läuft die Linie immer bis unten durch.
   Mitlaufen tut die rechte Spalte nicht über position:sticky - die
   Bühne ist nur rund 590px hoch und die rechte Spalte fast genauso,
   es bliebe also gar kein Weg zum Kleben. Sobald der Link aus dem
   Bild scrollt, übernimmt die Ergebnisleiste in Abschnitt G, und
   zwar auf jeder Fensterbreite. */
@media (min-width:1024px){
  .werkzeug-buehne{display:grid;grid-template-columns:minmax(0,1fr) 330px}   /* rechte Spalte 330px breit */
  .werkzeug-formular{border-right:1px solid var(--line)}
  .werkzeug-seite{border-top:0;align-self:start}
}

/* Sichtbar ist immer genau ein Formular. Welches, entscheidet das
   Skript: es setzt data-modus auf die Wurzel und data-aktiv auf das
   zugehörige Panel. Beides hier generisch, ohne die Namen der Modi -
   die kennt nur das Werkzeug selbst. Ohne JavaScript steht kein
   data-modus da, dann stehen alle Panels untereinander: unschön, aber
   vollständig lesbar. Ein Werkzeug, dessen Umschalter schon vor dem
   Laden des Skripts greifen soll, ergänzt dafür :has()-Regeln in
   seinem eigenen Stylesheet. */
.werkzeug[data-modus] .werkzeug-panel{display:none}
.werkzeug[data-modus] .werkzeug-panel[data-aktiv]{display:block}

/* --- D Felder ---------------------------------------------------- */
.feld{margin-bottom:16px}          /* 16px Abstand zum nächsten Feld */
.feld:last-child{margin-bottom:0}

.feld > label{
  display:block;margin-bottom:6px;            /* 6px Abstand zum Eingabefeld */
  font-size:.875rem;font-weight:600;line-height:1.3;   /* Schriftgröße 14px: die Beschriftung wird bei jedem Durchgang gelesen */
}
/* Der technische Parametername steht klein hinter der Beschriftung –
   wer das Schema kennt, findet sich damit sofort zurecht. */
.feld-param{
  font-family:var(--mono);font-size:.75rem;    /* Schriftgröße 12px - Untergrenze */
  font-weight:400;letter-spacing:.03em;color:var(--ink-faint);
  margin-left:6px;                             /* 6px Abstand zur Beschriftung */
}
/* Ersetzt das Wort "Optional." im Hinweis unter dem Feld und spart
   damit eine ganze Zeile je Feld. Bewusst nicht aria-hidden: für
   Screenreader heißt das Feld dann "Bereich optional". */
.feld-optional{
  font-family:var(--sans);font-size:.75rem;    /* Schriftgröße 12px - Untergrenze */
  font-weight:400;color:var(--ink-faint);
  margin-left:6px;                             /* 6px Abstand zum Wort davor */
}

.feld input[type="text"],
.feld input[type="url"],
.feld select{
  width:100%;
  /* Schriftgröße 16px, nicht kleiner: Safari auf dem iPhone zoomt beim
     Antippen in jedes Feld unter 16px hinein, und die Seite steht danach
     verschoben da. Größer gelesen wird es nebenbei auch. */
  font-family:var(--sans);font-size:1rem;line-height:1.4;
  padding:10px 12px;                           /* 10px oben und unten, 12px seitlich */
  /* --line-strong statt --line: der Rand macht das Feld überhaupt erst als
     Feld erkennbar und braucht deshalb 3:1 Kontrast. Mit --line waren es
     1,25:1 und die Felder standen praktisch unsichtbar auf der Karte. */
  border:1px solid var(--line-strong);border-radius:var(--radius-s);
  background:var(--surface);color:var(--ink);
  transition:border-color .16s var(--ease);
}
.feld input::placeholder{color:var(--ink-faint)}
.feld input:hover,.feld select:hover{border-color:var(--ink-soft)}
.feld input:focus,.feld select:focus{border-color:var(--ink);outline:none}
.feld input:focus-visible,.feld select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;   /* Rahmen 2px breit, 2px Abstand zum Feld */
}

/* Eigener Pfeil, damit das Auswahlfeld in allen Browsern gleich aussieht.
   Pfeil 11px breit, 13px vom rechten Rand, der Innenabstand rechts hält
   den Text davon frei. */
.feld select{
  appearance:none;-webkit-appearance:none;
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%235C5C5C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
  cursor:pointer;
}

/* Freies Feld unter einer Auswahlliste, erscheint bei "Eigene Eingabe". */
.feld-frei{margin-top:8px}         /* 8px Abstand zur Auswahlliste darüber */

/* Sichtbar steht ein Hinweis nur noch da, wo er eine Regel nennt, die
   das Feld selbst nicht zeigt: dass die Ziel-URL um das Schema ergänzt
   wird, welches Format der Zeitraum hat, warum in der Signatur nicht
   "email" steht. Alle übrigen Hinweise stehen weiter im HTML, nur als
   sr-only – der Platzhalter im Feld sagt Sehenden dasselbe, und am
   aria-describedby hängen sie unverändert. Sechs sichtbare Hinweise
   weniger sind rund 130px weniger Formularhöhe. */
.feld-hinweis{
  margin:6px 0 0;                  /* 6px Abstand zum Eingabefeld darüber */
  font-size:.8125rem;line-height:1.45;color:var(--ink-faint);   /* Schriftgröße 13px */
}
.feld-hinweis code{
  font-family:var(--mono);font-size:.95em;
  background:var(--code-bg);padding:1px 4px;border-radius:var(--radius-code);       /* 1px oben und unten, 4px seitlich */
}

/* Zwei Felder nebeneinander. Unter 640px Fensterbreite gestapelt. */
.feld-paar{
  display:grid;grid-template-columns:1fr 1fr;
  gap:16px;                        /* 16px zwischen den beiden Feldern */
  margin-bottom:16px;              /* 16px Abstand zum nächsten Block */
}
.feld-paar > .feld{margin-bottom:0}
.werkzeug-panel > *:last-child{margin-bottom:0}

/* Zeile unter den Feldern mit der Schaltfläche "Zurücksetzen". Sie steht
   bewusst hier und nicht in der Aktionsreihe am Ergebnis: dort steht,
   was man mit dem fertigen Link macht, hier, was man mit dem Formular
   macht. */
.formular-fuss{margin:20px 0 0}   /* 20px Abstand zum letzten Feld */

/* --- E Ergebnis -------------------------------------------------- */
.ergebnis .bereich-titel{margin-bottom:10px}   /* 10px Abstand zum Link darunter */
.ergebnis-url{
  margin:0;font-family:var(--mono);font-size:.875rem;line-height:1.65;   /* Schriftgröße 14px */
  color:var(--ink);
  /* Der Link bricht bevorzugt an den Stellen, die das Skript der Seite mit <wbr>
     markiert: vor jedem Parameter. Erst wenn ein Stück auch dann noch
     zu breit ist, bricht es mitten im Wort. Vorher stand hier
     break-all und jede Zeile endete irgendwo im Wort - beim
     Kontrollieren musste man den Link Zeichen für Zeichen entziffern. */
  overflow-wrap:anywhere;word-break:normal;
}
/* Solange Pflichtfelder fehlen, steht hier ein Satz und kein Link. */
.ergebnis-url.ist-leer{
  font-family:var(--sans);font-size:.9375rem;line-height:1.5;  /* Schriftgröße 15px */
  color:var(--ink-faint);
}
/* Die Parameternamen bleiben blass, die Werte dunkel – so liest man den
   Link, ohne ihn Zeichen für Zeichen zu entziffern. */
.ergebnis-url .schluessel{color:var(--ink-faint)}

.ergebnis-name{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:4px 10px;                    /* 4px zwischen umgebrochenen Zeilen, 10px zwischen Label und Wert */
  margin:16px 0 0;                 /* 16px Abstand zum Link darüber */
}
.ergebnis-name-label{
  font-family:var(--mono);font-size:.75rem;                   /* Schriftgröße 12px - Untergrenze */
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);
}
.ergebnis-name-wert{
  font-family:var(--mono);font-size:.8125rem;color:var(--ink);   /* Schriftgröße 13px */
  overflow-wrap:anywhere;
}

/* Hinweise zur Eingabe. Kein Farbcode: der Strich links ist bei einer
   Warnung in der Akzentfarbe, sonst grau. */
.hinweise:empty{display:none}
.hinweis{
  margin:16px 0 0;padding-left:13px;          /* 16px Abstand nach oben, 13px Innenabstand links */
  border-left:2px solid var(--line);          /* Strich 2px breit */
  font-size:.8125rem;line-height:1.5;color:var(--ink-soft);   /* Schriftgröße 13px */
}
.hinweis-warnung{border-left-color:var(--accent)}
.hinweis code{font-family:var(--mono);font-size:.95em;background:var(--code-bg);padding:1px 4px;border-radius:var(--radius-code)}

.aktionen{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:10px;                        /* 10px zwischen den Schaltflächen */
  margin-top:22px;                 /* 22px Abstand zum Ergebnis darüber */
}
/* Die Hauptschaltfläche kommt aus styles.css und ist dort 52px hoch: 15px
   Schrift mal Zeilenhöhe 1,6 plus je 12px Innenabstand oben und unten. Neben
   den flachen Schaltflächen mit ihren 37px war das ein sichtbarer Sprung in
   einer Reihe. Zeilenhöhe hier auf 1 und Innenabstand auf 11px oben und unten
   ergibt dieselben 37px Höhe; die Schrift bleibt bei 15px, damit die
   Hauptaktion die Hauptaktion bleibt. */
.aktionen .btn{
  line-height:1;                   /* Textzeile 15px hoch, so hoch wie die Schrift */
  padding:11px 20px;               /* 11px oben und unten, 20px seitlich */
}
/* In der schmalen rechten Spalte bekommt die Hauptaktion eine eigene Zeile
   über der vollen Spaltenbreite, "Merken" steht darunter. Mehr als diese
   zwei gehört nicht ans Ergebnis: kopieren und merken ist alles, was man
   mit einem fertigen Link tut. Alles andere gehört zum Formular. */
@media (min-width:1024px){
  .werkzeug-seite .aktionen .btn{flex:1 1 100%;justify-content:center}
}
/* Zweitrangige Schaltflächen sehen aus wie die Pillen der Filterreihe. */
.btn-flach{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:.8125rem;line-height:1;   /* Schriftgröße 13px */
  padding:11px 16px;               /* 11px oben und unten, 16px seitlich */
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--ink-soft);cursor:pointer;box-shadow:var(--lift);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), color .16s var(--ease);
}
/* Wie beim .btn in styles.css: der inaktive Zustand reagiert auf nichts,
   das :not(:disabled) hängt an der Hover-Regel selbst. */
.btn-flach:hover:not(:disabled),.btn-flach:active:not(:disabled){
  transform:translateY(2px);box-shadow:var(--lift-pressed);color:var(--ink);
}
.btn-flach:disabled{
  opacity:.42;cursor:default;transform:none;box-shadow:none;
}

.quittung{
  font-family:var(--mono);font-size:.8125rem;color:var(--ink-faint);   /* Schriftgröße 13px: eine Rückmeldung, die gelesen wird */
  opacity:0;transition:opacity .2s var(--ease);
}
.quittung.ist-da{opacity:1}

.werkzeug-schutz{
  margin:14px 0 0;                 /* 14px Abstand zur Karte darüber */
  font-size:.8125rem;line-height:1.5;color:var(--ink-faint);         /* Schriftgröße 13px */
}

/* --- F Merkliste ------------------------------------------------- */
/* Die Merkliste gehört zum Ergebnis und steht deshalb in derselben
   Spalte, abgesetzt durch eine Linie bis an die Kartenkante. Ohne
   JavaScript gibt es hier nichts zu zeigen, dann entfällt der Bereich
   ganz: es geht kein Inhalt verloren, die Liste ist beim Laden immer
   leer. */
.merkliste{display:none}
.js .merkliste{
  display:block;
  margin:22px -24px 0;             /* 22px Abstand zum Ergebnis, seitlich bis an die Kartenkante */
  border-top:1px solid var(--line);
  padding:20px 24px 0;             /* 20px unter der Linie, 24px seitlich wie die Karte */
}

.merk-kopf{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;                        /* 16px zwischen Überschrift und Zähler */
  margin-bottom:12px;              /* 12px Abstand zur Liste */
}
.merk-zahl{font-family:var(--mono);font-size:.75rem;color:var(--ink-faint)}    /* Schriftgröße 12px */

.merk-leer{margin:0;font-size:.8125rem;line-height:1.5;color:var(--ink-faint)} /* Schriftgröße 13px */

.merk-liste{list-style:none;margin:0;padding:0}
.merk-eintrag{
  padding:14px 0;                  /* 14px oben und unten */
  border-bottom:1px solid var(--line);
}
.merk-eintrag:first-child{border-top:1px solid var(--line)}
.merk-name{
  font-family:var(--mono);font-size:.8125rem;font-weight:700;          /* Schriftgröße 13px */
  line-height:1.4;overflow-wrap:anywhere;
}
.merk-art{font-weight:400;color:var(--ink-faint)}
.merk-meta{
  margin-top:3px;                  /* 3px Abstand zum Namen */
  font-family:var(--mono);font-size:.75rem;color:var(--ink-faint);     /* Schriftgröße 12px - Untergrenze */
}
.merk-url{
  margin-top:7px;                  /* 7px Abstand zur Zeile darüber */
  font-family:var(--mono);font-size:.8125rem;line-height:1.6;          /* Schriftgröße 13px: der Link wird gelesen und kopiert */
  color:var(--ink-soft);overflow-wrap:anywhere;
}
.merk-tasten{
  display:flex;flex-wrap:wrap;gap:8px;   /* 8px zwischen den Schaltflächen */
  margin-top:10px;                       /* 10px Abstand zum Link darüber */
}
.btn-mini{
  font-family:var(--mono);font-size:.75rem;line-height:1;      /* Schriftgröße 12px - Untergrenze */
  padding:6px 11px;                                            /* 6px oben und unten, 11px seitlich */
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--ink-soft);cursor:pointer;
  transition:color .16s var(--ease), border-color .16s var(--ease);
}
.btn-mini:hover:not(:disabled){color:var(--ink);border-color:var(--ink-faint)}
.btn-mini:disabled{opacity:.42;cursor:default}
.merk-aktionen{
  display:flex;flex-wrap:wrap;gap:10px;   /* 10px zwischen den Schaltflächen */
  margin-top:18px;                        /* 18px Abstand zur Liste */
}

/* --- G Ergebnisleiste am unteren Fensterrand ---------------------- */
/* Der fertige Link in einer Zeile und daneben der Kopieren-Knopf.
   das Skript der Seite blendet sie über das hidden-Attribut ein, sobald drei Dinge
   gleichzeitig stimmen: es gibt einen fertigen Link, der
   Ergebnisblock ist aus dem Bild, und die Karte ist noch zu sehen.
   Die letzte Bedingung hält sie aus dem Erklärteil heraus - dort
   liest man und baut keine Links. */
.werkzeug-leiste{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--surface);
  border-top:1px solid var(--line-strong);
  box-shadow:0 -3px 14px rgba(18,18,18,.09);
  padding-top:10px;                                            /* 10px über dem Inhalt */
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));  /* 10px darunter, plus die Leiste des Geräts */
}
.werkzeug-leiste[hidden]{display:none}
/* Damit ein Feld, das per Tab oder Sprungmarke ins Bild geholt wird,
   nicht unter der Leiste landet. Wirkt nur auf gesteuertes Scrollen,
   nicht auf das Rad. */
html{scroll-padding-bottom:80px}   /* 80px: Leistenhöhe plus etwas Luft */
.werkzeug-leiste-inhalt{
  display:flex;align-items:center;
  gap:14px;                        /* 14px zwischen Link und Knopf */
}
.werkzeug-leiste-url{
  flex:1 1 auto;min-width:0;margin:0;
  font-family:var(--mono);font-size:.8125rem;line-height:1.4;   /* Schriftgröße 13px */
  color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.werkzeug-leiste .btn{
  flex:0 0 auto;
  line-height:1;                   /* Textzeile 15px hoch, so hoch wie die Schrift */
  padding:11px 20px;               /* 11px oben und unten, 20px seitlich */
}

/* Der Erklärteil soll nicht wie die nächste Zeile des Werkzeugs wirken,
   sondern wie ein neuer Abschnitt. Die Karte liefert die Kante, der
   Abstand und der Sprung zurück in die Lesespalte den Rest. */
.werkzeug-text{margin-top:88px}    /* 88px Abstand zur Karte darüber */

/* --- H Responsive ------------------------------------------------ */
@media (max-width:640px){
  .werkzeug-modi{padding:14px 16px}              /* 14px oben und unten, 16px seitlich */
  .werkzeug-formular{padding:18px 16px 20px}     /* 18px oben, 16px seitlich, 20px unten */
  .werkzeug-seite{padding:18px 16px 20px}        /* 18px oben, 16px seitlich, 20px unten */
  .js .merkliste{margin:20px -16px 0;padding:20px 16px 0}   /* seitlich bis an die schmalere Kartenkante */
  .werkzeug-text{margin-top:64px}                /* 64px Abstand zur Karte darüber */
  .feld-paar{grid-template-columns:1fr}
  .aktionen .btn,.aktionen .btn-flach{flex:1 1 auto;justify-content:center}

  /* Der "Über mich"-Zipfel klebt auf dem Handy unten rechts über der Seite
     und deckt dort ein Eingabefeld ab. Auf einer Seite, die man ausfüllt,
     wiegt das schwerer als der Weg zur Seite "Über mich" - den gibt es am
     Seitenende ohnehin. Nur hier ausgeblendet, auf allen anderen Seiten
     bleibt er. */
  .tab,.flyout{display:none}
}