/* Rechner unter /werkzeuge/. Baut auf den Tokens aus styles.css auf und
   bleibt bewusst nah an prog-seo.css: die Werkzeuge sollen wie ein Teil
   der Seite wirken, nicht wie ein eingebettetes Fremdgerät. */

.tool-question{
  font-family:var(--font-display);font-style:italic;font-weight:350;
  font-size:clamp(20px,2.6vw,28px);line-height:1.3;
  margin-top:var(--space-3);max-width:30ch;color:var(--accent);
}

.tool-band{padding-top:var(--space-5);}

/* --- Rahmen des Rechners ------------------------------------------------ */
.tool{border:1px solid var(--line);background:#fff;}
.tool-split{display:grid;grid-template-columns:1.05fr .95fr;}
@media (max-width:900px){ .tool-split{grid-template-columns:1fr;} }

.tool-in{padding:var(--space-4);border-right:1px solid var(--line);}
@media (max-width:900px){ .tool-in{border-right:none;border-bottom:1px solid var(--line);} }

.tool-out{
  padding:var(--space-4);
  background:var(--ink);color:var(--cream);
  display:flex;flex-direction:column;gap:var(--space-3);
}

.tool-legend{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  opacity:.55;margin-bottom:var(--space-3);display:block;
}
.tool-out .tool-legend{opacity:.45;}

/* --- Felder ------------------------------------------------------------- */
.field{display:grid;gap:6px;margin-bottom:var(--space-3);}
.field > label{font-size:13px;letter-spacing:.02em;font-weight:500;}
.field-hint{font-size:12px;opacity:.55;line-height:1.4;}

.field input[type="number"],
.field input[type="text"],
.field select{
  font:inherit;font-size:15px;
  padding:11px 12px;
  border:1px solid var(--line);
  background:var(--cream);
  color:var(--ink);
  border-radius:0;
  width:100%;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field input:focus-visible,
.field select:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;border-color:transparent;
}
.field input[type="number"]{appearance:textfield;-moz-appearance:textfield;}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);}
@media (max-width:520px){ .field-row{grid-template-columns:1fr;} }

/* Segmentierte Auswahl statt Radiobutton-Reihe. */
.seg{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);}
.seg label{
  flex:1 1 auto;min-width:0;text-align:center;
  padding:10px 12px;font-size:13px;cursor:pointer;
  border-right:1px solid var(--line);
  transition:background .18s var(--ease), color .18s var(--ease);
  white-space:nowrap;
}
.seg label:last-child{border-right:none;}
.seg input{position:absolute;opacity:0;pointer-events:none;}
.seg input:checked + span{color:var(--cream);}
.seg label:has(input:checked){background:var(--accent);color:var(--cream);}
.seg label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:-2px;}

/* Slider für Werte, bei denen das Gefühl für die Grösse hilft. */
.field input[type="range"]{width:100%;accent-color:var(--accent);}
.range-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.range-val{font-family:var(--font-display);font-size:20px;}

/* --- Ergebnis ----------------------------------------------------------- */
.result-main{
  font-family:var(--font-display);font-weight:350;
  font-size:clamp(38px,6vw,64px);line-height:1;letter-spacing:-.02em;
}
.result-main small{
  display:block;font-family:var(--font-body);font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin-bottom:10px;
}
.result-unit{font-size:.42em;opacity:.6;margin-left:.2em;letter-spacing:0;}

.result-note{
  font-size:14px;line-height:1.55;opacity:.72;max-width:42ch;
  border-left:1px solid var(--line-dark);padding-left:var(--space-2);
}
.result-note strong{opacity:1;font-weight:600;}

.result-rows{display:grid;gap:0;margin-top:auto;}
.result-rows div{
  display:flex;justify-content:space-between;gap:var(--space-2);
  padding:11px 0;border-top:1px solid var(--line-dark);
  font-size:14px;
}
.result-rows dt, .result-rows span:first-child{opacity:.6;}
.result-rows span:last-child{font-variant-numeric:tabular-nums;text-align:right;}

.result-flag{
  display:inline-block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border:1px solid currentColor;align-self:flex-start;
}
.result-flag[data-level="ok"]{color:#9fbf7a;}
.result-flag[data-level="warn"]{color:#e0a24a;}
.result-flag[data-level="high"]{color:#e2724a;}

/* Balken für Punktestände und Verteilungen. */
.meter{height:6px;background:var(--line-dark);position:relative;overflow:hidden;}
.meter i{
  position:absolute;inset:0 auto 0 0;background:var(--accent);
  transition:width .45s var(--ease);
}

/* Zeilenliste, die der Rechner selbst befüllt (Raumliste, Stückliste). */
.tool-list{display:grid;gap:8px;}
.tool-list-row{
  display:grid;grid-template-columns:1fr 88px 88px auto;gap:8px;align-items:center;
}
@media (max-width:620px){ .tool-list-row{grid-template-columns:1fr 70px 70px auto;} }
.tool-list-row select, .tool-list-row input{padding:9px 10px;font-size:14px;}
.row-drop{
  border:1px solid var(--line);background:transparent;color:inherit;
  width:34px;height:34px;cursor:pointer;line-height:1;font-size:16px;
  transition:var(--press);
}
.row-drop:hover{background:var(--accent);color:var(--cream);border-color:transparent;}

.tool-add{
  margin-top:var(--space-2);font:inherit;font-size:14px;
  background:transparent;border:1px solid var(--line);color:inherit;
  padding:9px 16px;cursor:pointer;transition:var(--press);
}
.tool-add:hover{background:var(--ink);color:var(--cream);border-color:transparent;}

.tool-noscript{
  margin-top:var(--space-3);padding:var(--space-3);
  border:1px solid var(--line);font-size:14px;line-height:1.55;
}

/* --- Rechenweg und Annahmen -------------------------------------------- */
.tool-prose{max-width:68ch;display:grid;gap:var(--space-2);line-height:1.65;}
.tool-prose p{opacity:.85;}

.tool-method{display:grid;grid-template-columns:1.4fr .9fr;gap:var(--space-5);align-items:start;}
@media (max-width:900px){ .tool-method{grid-template-columns:1fr;} }

.method-list{
  list-style:none;counter-reset:m;display:grid;gap:12px;max-width:62ch;
}
.method-list li{
  counter-increment:m;padding-left:38px;position:relative;
  line-height:1.55;font-size:15px;
}
.method-list li::before{
  content:counter(m,decimal-leading-zero);
  position:absolute;left:0;top:.1em;
  font-size:12px;letter-spacing:.06em;opacity:.45;
  font-variant-numeric:tabular-nums;
}
.method-list code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;}

.tick-list--tight{gap:9px;font-size:14px;}
.tool-grenze{
  margin-top:var(--space-3);padding-top:var(--space-3);
  border-top:1px solid var(--line);font-size:14px;line-height:1.55;opacity:.75;
}

.tool-handoff p{max-width:56ch;opacity:.8;line-height:1.6;margin-top:var(--space-2);}
.tool-handoff a{border-bottom:1px solid var(--line-dark);}

/* --- Werkzeug-Übersicht ------------------------------------------------- */
.tool-grid{
  list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.tool-grid li{background:var(--cream);}
.band-tint .tool-grid li{background:var(--cream);}
.tool-grid a{
  display:grid;gap:8px;padding:var(--space-3);height:100%;
  transition:background .22s var(--ease), color .22s var(--ease);
}
.tool-grid a:hover{background:var(--ink);color:var(--cream);}
.tool-grid-name{
  font-family:var(--font-display);font-size:20px;font-weight:350;line-height:1.2;
}
.tool-grid-frage{font-size:14px;opacity:.62;line-height:1.5;}
.tool-grid a:hover .tool-grid-frage{opacity:.7;}

@media (prefers-reduced-motion:reduce){
  .meter i, .tool-grid a, .field input, .field select{transition:none;}
}

/* --- Mobile-Feinschliff (2026-09-22) ---------------------------------- */

@media (max-width:600px){
  /* 40px Innenrand im Rechner plus 24px Seitenrand der Seite liessen für
     die Felder nur noch rund 300px. Eingabe und Ergebnis rücken enger. */
  .tool-in,.tool-out{padding:var(--space-3);}

  /* Die Ergebniszahl stand mit 38px allein auf einer Zeile und drückte
     die Erläuterung darunter aus dem Blick. */
  .result-main{font-size:clamp(32px,10vw,44px);}

  /* Die Zeilenliste braucht schmalere Zahlenfelder, damit der Name der
     Zeile noch lesbar bleibt. */
  /* 56px reichen fuer drei Ziffern bei 16px Schrift. Der Rest gehoert dem
     Raumnamen, der sonst schon nach "Wohnzimm" abgeschnitten wird. */
  .tool-list-row{grid-template-columns:1fr 56px 56px auto;gap:6px;}
}

/* Unter 360px blieb fuer den Raumnamen eine Spalte von rund 34px: das
   Auswahlfeld zeigte dann kein einziges Wort mehr. Also stapeln, mit der
   Entfernen-Taste am Ende der Zeile. */
@media (max-width:360px){
  .tool-list-row{
    grid-template-columns:1fr auto;
    grid-template-areas:"name weg" "zahlen zahlen";
    gap:6px 8px;
  }
  .tool-list-row > :first-child{grid-area:name;}
  .tool-list-row > .row-drop{grid-area:weg;}
}

/* Mit dem Finger bedient. Steht hier und nicht in styles.css: diese Datei
   wird zuletzt geladen und wuerde die dortigen Regeln bei gleicher
   Spezifitaet sonst wieder ueberschreiben. */
@media (pointer:coarse){
  .field input[type="number"],
  .field input[type="text"],
  .field select,
  .tool-list-row select,
  .tool-list-row input{min-height:44px;font-size:16px;}
  /* Das Kreuz zum Entfernen einer Zeile sass mit 34px zwischen zwei
     Eingabefeldern: zu klein und zu dicht am Nachbarn. */
  .row-drop{width:44px;height:44px;font-size:18px;}
  .tool-add{min-height:44px;}
  .tool-grid a{min-height:44px;}
}