/* spinellastudiosde/public/assets/css/tools.css
 * Tool-Seiten unter /daniel/projekte/<name>/ (Random Chat, RC-Car, WebRTC, API-Demos).
 * Die Tools sind eigener Code mit eigenen Inline-Styles von dspinella.de. Diese Datei übersetzt ihre alten
 * Farbvariablen (--text, --background, --accent, ...) in die Studio-Farben und stellt die Grundtypo wieder her,
 * damit sie unverändert weiterlaufen. Kopf und Fuß kommen aus studio.css.
 */

.tool-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  --text: var(--p-text);
  --background: var(--p-bg);
  --background2: var(--p-card);
  --primary: var(--p-blue);
  --secondary: var(--p-violet);
  --accent: var(--p-blue);
}

/* Alte Grundlage der Tools: alles ohne Abstände, Seiten-Styles dürfen das jederzeit überschreiben */
:where(.tool-page main *) { margin: 0; padding: 0; }

.tool-page main { flex: 1 0 auto; width: 100%; max-width: 1080px; margin: 32px auto 64px; padding-inline: 20px; }
.tool-page main :where(h1) { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; }
.tool-page main :where(h2) { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; font-weight: 700; }
.tool-page main :where(h3) { font-size: 1.6rem; font-weight: 700; }
.tool-page main :where(h4) { font-size: 1.3rem; font-weight: 600; }
.tool-page main :where(p, li, label) { font-size: 1rem; line-height: 1.6; }
.tool-page main :where(button, input, textarea, select) { font: inherit; color: inherit; }
.tool-page main :where(textarea, input) { background: var(--p-card); border: 1px solid var(--p-edge); border-radius: 10px; }
.tool-page main :where(iframe) { max-width: 100%; }