/* OwnerHub · Gratis-Tools (Mietzinsrechner, Kautionsrechner, Vorlagen)
   Präfix tl-. Baut auf site.css auf (Tokens, .field, .btn, .callout, .faq). */

/* Kopf */
section.tl-head{padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(28px,3vw,40px)}
.tl-head h1{font-size:clamp(40px,5.6vw,76px);max-width:18ch;margin:6px 0 22px}
.tl-head .lead{max-width:62ch}
.tl-head .crumb{flex-wrap:wrap;row-gap:4px}
.tl-head .crumb [aria-current]{color:var(--ink)}
.tl-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.tl-nav a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--rule-strong);border-radius:999px;font-size:15px;font-weight:500;color:var(--ink-2);background:var(--surface);transition:border-color .2s,background .2s}
.tl-nav a:hover{border-color:var(--ink)}
.tl-nav a[aria-current="page"]{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.tl-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}

/* Werkzeug: Eingaben links, Ergebnis rechts */
section.tl-tool{padding-top:0;padding-bottom:clamp(56px,7vw,96px)}
.tl-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start}
.tl-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,34px);min-width:0}
.tl-card h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:6px}
.tl-card>p.muted{font-size:15.5px}
.tl-result{position:sticky;top:92px}
.tl-fs{border:0;display:grid;gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
.tl-fs:first-of-type{border-top:0;padding-top:0;margin-top:22px}
.tl-fs legend{font:600 14px var(--font-body);letter-spacing:.01em;color:var(--ink);padding:0;margin-bottom:2px;float:left;width:100%;display:flex;gap:10px;align-items:center}
.tl-fs legend .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);font-size:12.5px}
.tl-hint{font-size:13.5px;line-height:1.5;color:var(--muted)}
.tl-hint a{border-bottom:1px solid var(--rule-strong)}
/* Meldung unter einem Feld: Hinweis (grau) oder Fehler (rot, Feld markiert) */
.tl-meldung{font-size:13.5px;line-height:1.5;color:var(--ink-2);padding:6px 10px;border-radius:8px;background:var(--accent-soft)}
.tl-meldung.fehler{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.tl-card [aria-invalid="true"]{border-color:var(--bad)!important}
.tl-unit{position:relative}
.tl-card .field{align-content:start}
.tl-unit input{display:block}
.tl-unit input{padding-right:64px}
.tl-unit span{position:absolute;right:14px;top:0;bottom:0;display:flex;align-items:center;font-size:15px;line-height:1;color:var(--muted);pointer-events:none}
.tl-unit.vor input{padding-right:16px;padding-left:56px}
.tl-unit.vor span{right:auto;left:16px}
.field input[type=date]{min-height:52px;height:52px}
.tl-unit input{height:52px}
.tl-check{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;cursor:pointer}
.tl-check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--accent)}
.tl-radio{display:flex;flex-wrap:wrap;gap:8px}
.tl-radio label{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 18px;border:1px solid var(--rule-strong);border-radius:999px;font-size:15px;font-weight:500;cursor:pointer;background:var(--surface)}
.tl-radio input{position:absolute;opacity:0;inset:0;cursor:pointer}
.tl-radio label:has(input:checked){background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.tl-radio label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}

/* Ergebnis */
.tl-big{display:flex;flex-direction:column;gap:4px;padding:6px 0 22px;border-bottom:1px solid var(--rule)}
.tl-big .mono{font-size:12px}
.tl-big b{font-family:var(--font-display);font-weight:300;font-size:clamp(46px,5.4vw,72px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tl-big small{font-size:15.5px;color:var(--muted)}
.tl-delta{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:15px;font-weight:500}
.tl-delta i{font-style:normal;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-variant-numeric:tabular-nums}
.tl-delta.neg i{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}
.tl-weg{margin-top:20px}
.tl-weg h3{font:600 15px var(--font-body);letter-spacing:0;margin-bottom:6px}
.tl-weg ol{list-style:none;display:grid;counter-reset:s}
.tl-weg li{counter-increment:s;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.5}
.tl-weg li::before{content:counter(s);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--rule-strong);font-size:12.5px;color:var(--muted)}
.tl-weg li.sum::before{content:"=";border-color:var(--ink);color:var(--ink)}
.tl-weg li b{font-weight:600}
.tl-weg li .f{color:var(--muted);font-size:14px;grid-column:2}
.tl-weg li .v{grid-column:3;grid-row:1/span 2;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-weg li .v small{display:block;color:var(--muted);font-size:13.5px}
.tl-weg li.off{color:var(--muted)}
.tl-weg li.sum{border-bottom:0;font-weight:500}
.tl-box{margin-top:20px;padding:18px 20px;border-radius:var(--r);background:var(--accent-soft);border:1px solid var(--rule);font-size:15px;line-height:1.55}
.tl-box h3{font:600 15px var(--font-body);letter-spacing:0;margin-bottom:6px}
.tl-box p+p{margin-top:8px}
.tl-box.warn{background:color-mix(in srgb,var(--warn) 10%,transparent)}
.tl-box ul{display:grid;gap:4px;margin-top:6px}
.tl-box li{padding-left:18px;position:relative}
.tl-box li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.tl-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.tl-small{margin-top:16px;font-size:13px;line-height:1.5;color:var(--muted)}
.tl-leerhinweis{padding:28px 0 8px;color:var(--muted);font-size:15.5px}

/* Zwei Werte nebeneinander (Kaution) */
.tl-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:16px}
.tl-pair div{padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r);display:grid;gap:2px}
.tl-pair span{font-size:13.5px;color:var(--muted)}
.tl-pair b{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}

/* Nur im Ausdruck: Eingaben zum Rechenweg */
.tl-nurdruck{display:none}

/* Übersicht Gratis-Tools */
.tl-kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tl-kachel{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,32px);transition:border-color .2s;min-width:0}
.tl-kachel:hover{border-color:var(--ink)}
.tl-kachel svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;color:var(--accent-text)}
.tl-kachel h2{font-size:clamp(24px,2.4vw,30px)}
.tl-kachel p{color:var(--muted);font-size:15.5px;line-height:1.55;flex:1}
.tl-kachel .mehr{font-weight:500;font-size:15px}
@media(max-width:900px){.tl-kacheln{grid-template-columns:minmax(0,1fr)}}

/* Fliesstext unter dem Werkzeug */
section.tl-text{padding-top:clamp(24px,3vw,48px)}
.tl-text .article h2:first-child{margin-top:0}
.tl-text table{width:100%;border-collapse:collapse;margin:18px 0;font-size:16px}
.tl-text th,.tl-text td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.tl-text th{font-weight:600;font-size:14px;color:var(--muted)}
.tl-text td:last-child,.tl-text th:last-child{text-align:right;white-space:nowrap}
.tl-quelle{margin-top:26px;font-size:14px;color:var(--muted)}

/* Vorlagen: Reiter, Formular und Blatt */
.tl-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tl-tabs button{height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--rule-strong);background:var(--surface);font-size:15px;font-weight:500}
.tl-tabs button[aria-selected="true"]{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.tl-panel[hidden]{display:none}
.tl-vgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.tl-preview{position:sticky;top:92px;display:grid;gap:12px}
.tl-preview .mono{font-size:12px}
.tl-paper-wrap{background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(10px,1.6vw,20px);max-height:calc(100vh - 190px);overflow:auto}
.tl-rows{display:grid;gap:10px}
.tl-row{display:grid;gap:8px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.4fr) 40px;align-items:end}
.tl-row .field input,.tl-row .field select{height:46px}
.tl-row.zwei{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 40px}
.tl-row.drei{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) 40px}
.tl-row .field label{font-size:13px}
.tl-row .field input,.tl-row .field select{padding:11px 12px;font-size:15.5px}
.tl-del{width:40px;height:46px;border-radius:12px;border:1px solid var(--rule);display:grid;place-items:center;color:var(--muted)}
.tl-del:hover{border-color:var(--bad);color:var(--bad)}
.tl-del svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.tl-add{justify-self:start;height:40px;padding:0 16px;border-radius:999px;border:1px dashed var(--rule-strong);font-size:14.5px;font-weight:500;color:var(--ink-2)}
.tl-add:hover{border-color:var(--ink)}

/* Das Blatt: immer Papier, auch im dunklen Modus */
.tl-papier{background:#fff;color:#16171b;font-family:var(--font-body);font-size:12.5px;line-height:1.5;padding:30px 34px;border-radius:6px;box-shadow:0 1px 0 rgba(11,12,15,.04),0 20px 40px -24px rgba(11,12,15,.35)}
.tl-papier[hidden]{display:none}
.tl-papier h3{font:600 17px/1.3 var(--font-body);letter-spacing:0;margin:18px 0 10px;color:#0b0c0f}
.tl-papier h4{font:600 13px/1.3 var(--font-body);margin:16px 0 6px;color:#0b0c0f}
.tl-papier p{margin:0 0 9px}
.tl-papier p+p{margin-top:0}
.tl-papier .kopf{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px;white-space:pre-line}
.tl-papier .kopf .an{padding-top:18px}
.tl-papier .ort{margin:8px 0 14px}
.tl-papier .betreff{font-weight:600;font-size:14px;margin-bottom:12px}
.tl-papier .einschreiben{font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11px;margin-bottom:6px}
.tl-papier table{width:100%;border-collapse:collapse;margin:6px 0 12px}
.tl-papier th,.tl-papier td{border:1px solid #c9c9cc;padding:5px 7px;text-align:left;vertical-align:top}
.tl-papier th{background:#f2f2f0;font-weight:600;font-size:11.5px}
.tl-papier td.r,.tl-papier th.r{text-align:right;white-space:nowrap}
.tl-papier .leer{display:inline-block;min-width:120px;border-bottom:1px solid #8a8a90;height:1.1em;vertical-align:baseline}
.tl-papier td .leer{min-width:0;width:100%}
.tl-papier .unterschriften{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:30px}
.tl-papier .unterschriften div{border-top:1px solid #16171b;padding-top:6px;font-size:11.5px}
.tl-papier .fuss{margin-top:22px;padding-top:10px;border-top:1px solid #dcdcdf;font-size:10.5px;color:#55575e}
.tl-papier .wahl{display:inline-block;white-space:nowrap;margin-right:8px}
.tl-papier .kreuz{display:inline-block;width:11px;height:11px;border:1px solid #16171b;margin-right:5px;vertical-align:-1px;text-align:center;line-height:9px;font-size:10px}

@media(max-width:1000px){
  .tl-grid,.tl-vgrid{grid-template-columns:minmax(0,1fr)}
  .tl-result,.tl-preview{position:static}
  .tl-paper-wrap{max-height:none}
}
@media(max-width:600px){
  .tl-row,.tl-row.zwei,.tl-row.drei{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px}
  .tl-row>.field:first-child{grid-column:1/-1}
  .tl-row.zwei>.field:first-child{grid-column:1/-1}
  .tl-row.zwei{grid-template-columns:minmax(0,1fr) 40px}
  .tl-papier{padding:20px 16px;font-size:12px}
  .tl-papier .kopf{grid-template-columns:1fr;gap:6px}
  .tl-pair{grid-template-columns:minmax(0,1fr)}
  .tl-weg li{grid-template-columns:28px minmax(0,1fr);}
  .tl-weg li .v{grid-column:2;grid-row:auto;text-align:left}
  .tl-weg li .v small{display:inline;margin-left:8px}
}

/* Drucken: nur das Ergebnis bzw. das gewählte Blatt */
@media print{
  @page{size:A4;margin:16mm 16mm 18mm}
  html,body{background:#fff!important;color:#000}
  .skip,.nav,.mobile-menu,footer.site,.sticky-cta,.tl-nodruck,#main>section:not(.tl-druck){display:none!important}
  #main>section.tl-druck{padding:0!important}
  .tl-druck .container{padding:0;max-width:none}
  .tl-druck .tl-grid,.tl-druck .tl-vgrid{display:block}
  .tl-druck .tl-card{border:0;padding:0}
  .tl-druck .tl-result{position:static}
  .tl-preview,.tl-paper-wrap{position:static;display:block;max-height:none;overflow:visible;background:none;border:0;padding:0}
  .tl-papier{box-shadow:none;border-radius:0;padding:0;font-size:10.5pt}
  /* Tabellen dürfen über Seiten laufen (sonst springt eine lange Tabelle auf Seite 2 und
     Seite 1 bleibt leer); unteilbar sind nur Zeilen und der Unterschriftenblock. */
  .tl-papier tr,.tl-papier .unterschriften,.tl-box,.tl-weg li{break-inside:avoid}
  .tl-papier thead{display:table-header-group}
  .tl-papier tfoot{display:table-row-group}
  .tl-papier h4,.tl-weg h3{break-after:avoid}
  .tl-papier h3{margin-top:0}
  /* Rechenweg kompakt, wenn möglich auf einer Seite */
  .tl-nurdruck{display:block}
  .tl-eingaben{margin-bottom:10px}
  .tl-eingaben .t{font-size:15pt;font-weight:600;margin:0}
  .tl-eingaben .d{font-size:8.5pt;color:#555;margin:0 0 6px}
  .tl-eingaben table{width:100%;border-collapse:collapse;font-size:9pt}
  .tl-eingaben th,.tl-eingaben td{text-align:left;padding:2px 6px;border-bottom:1px solid #ddd;vertical-align:top}
  .tl-eingaben th{width:34%;font-weight:600}
  .tl-druck .tl-result>h2{display:none}
  .tl-druck .tl-big{padding:4px 0 8px}
  .tl-druck .tl-big b{font-size:24pt}
  .tl-druck .tl-big small,.tl-druck .tl-delta{font-size:9.5pt;margin-top:2px}
  .tl-druck .tl-weg{margin-top:8px}
  .tl-druck .tl-weg li{padding:4px 0;font-size:9.5pt;line-height:1.35}
  .tl-druck .tl-weg li .f,.tl-druck .tl-weg li .v small{font-size:8.5pt}
  .tl-druck .tl-box{margin-top:8px;padding:6px 10px;font-size:9pt;line-height:1.4;background:none!important;border:1px solid #bbb}
  .tl-druck .tl-small{font-size:8pt;margin-top:8px}
}