@import url('schriften.css');

/* ==========================================================================
   gentuka.com

   Bild: ein Ladenschild mit einem Blatt Papier davor. Eine kräftige blaue
   Fläche mit dem Satz, um den es geht, davor als weißes Blatt die
   Google-Vorschau eines Betriebs. Darunter nüchternes Schwarz auf Papier,
   an einer Kante ausgerichtet, die nie wandert.

   Die Zielgruppe sind Betriebsinhaber zwischen 35 und 65, die nicht in
   Websites denken, sondern in Schaufenster, Aushang und Preisliste. Deshalb
   ist die Gliederung eine Preisliste: Begriff links, Erklärung rechts.

   Genau eine Farbe trägt Bedeutung: das Grün der Öffnungszeit in der
   Google-Vorschau. Es kommt sonst nirgends vor.
   ========================================================================== */

:root {
  --schild:    #17457F;   /* Blau deutscher Straßen- und Praxisschilder */
  --schild-tief:#103358;
  --papier:    #f0f1ee;   /* kühles Weiß, bewusst nicht cremefarben */
  --blatt:     #ffffff;
  --tinte:     #000000;   /* echtes Schwarz, wie gedruckt */
  --bleistift: #4f5a63;
  --offen:     #1c6b3a;   /* nur für „Heute geöffnet“ */
  --falz:      #d3d6d1;
  --falz-dunkel: #b9bdb7;

  --schild-schrift: 'Fira Sans Condensed', 'Fira Sans', 'Helvetica Neue', sans-serif;
  --text: 'Fira Sans', system-ui, 'Segoe UI', sans-serif;

  --bahn: 54rem;
  --luft: clamp(1.25rem, 5vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 1.06rem;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--schild-schrift);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--schild); }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }

.bahn { width: min(100% - 2 * var(--luft), var(--bahn)); margin-inline: auto; }

.zum-inhalt { position: absolute; left: -9999px; background: var(--tinte); color: #fff; padding: .7em 1.2em; }
.zum-inhalt:focus { left: var(--luft); top: .5rem; z-index: 10; }

/* ---- Kopf: nur Name und Nummer ------------------------------------- */

.kopf { padding-block: 1.1rem; }
.kopf__innen { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; justify-content: space-between; align-items: baseline; }
.kopf__name { font-family: var(--schild-schrift); font-size: 1.15rem; text-decoration: none; color: var(--tinte); }
.kopf__nummer { font-family: var(--schild-schrift); font-size: 1.15rem; text-decoration: none; color: var(--tinte); }
.kopf__nummer:hover { text-decoration: underline; }

/* ---- Das Schild ----------------------------------------------------- */

.schild {
  background: var(--schild);
  color: #fff;
  /* Unten Luft, damit die Tasten nicht an der Kante kleben. Das Blatt ragt
     stattdessen per Verschiebung heraus, ohne die Hoehe zu beeinflussen. */
  padding-block: clamp(2.5rem, 7vw, 4rem) clamp(2rem, 5vw, 3rem);
}

.schild__satz {
  font-family: var(--schild-schrift);
  font-size: clamp(2.3rem, 7.5vw, 3.9rem);
  max-width: 13em;
  margin-bottom: 1rem;
  letter-spacing: -0.005em;
}

.schild__text { max-width: 33rem; margin-bottom: 1.7rem; }
.schild__preis { font-family: var(--schild-schrift); font-size: 1.3rem; }

.tasten { display: flex; flex-wrap: wrap; gap: .8rem; }

.taste {
  font-family: var(--schild-schrift);
  font-size: 1.15rem;
  padding: .7em 1.6em;
  text-decoration: none;
  border: 2px solid #fff;
  display: inline-block;
}
.taste--voll { background: #fff; color: var(--schild); }
.taste--voll:hover { background: transparent; color: #fff; }
.taste--leer { color: #fff; }
.taste--leer:hover { background: #fff; color: var(--schild); }

/* Das Blatt schiebt sich über die untere Schildkante. Es wird verschoben,
   nicht mit negativem Rand gezogen: sonst schrumpft die Schildhoehe und die
   Tasten geraten unter die Kante. Der Ueberstand muss deutlich sein, denn
   unterhalb liegt Weiss auf fast-Weiss, dort traegt nur der Rahmen. */
.schild__blattraum { padding-top: clamp(2rem, 5vw, 3rem); }

.schild__blattraum .treffer {
  position: relative;
  top: clamp(2.5rem, 6vw, 4rem);
}

/* Ab mittlerer Breite sitzt das Blatt rechts, wo sonst leeres Blau steht,
   und der Text behaelt links seine Kante. */
@media (min-width: 52em) {
  .schild__innen { display: grid; grid-template-columns: minmax(0, 31rem) 1fr; gap: 0 2.5rem; align-items: end; }
  .schild__spalte { grid-column: 1; }
  .schild__blattraum { grid-column: 2; padding-top: 0; }
  .schild__blattraum .treffer { margin-left: auto; }
}

/* ---- Die Google-Vorschau: das eine mutige Element -------------------- */

.treffer {
  background: var(--blatt);
  border: 1px solid var(--falz-dunkel);
  border-radius: 8px;               /* zitiert die Optik des Suchergebnisses */
  padding: 1.15rem 1.35rem;
  max-width: 27rem;
  box-shadow: 0 1px 0 var(--falz-dunkel);
  color: var(--tinte);
}
.treffer__betrieb { font-family: var(--text); font-weight: 500; font-size: 1.15rem; color: #1a0dab; }
.treffer__art { color: var(--bleistift); font-size: .92rem; margin: .1rem 0 .55rem; }
.treffer__zeile { font-size: .96rem; margin: 0 0 .2rem; }
.treffer__offen { color: var(--offen); font-weight: 500; }

.blattzeile {
  font-size: .94rem;
  color: var(--bleistift);
  margin: .7rem 0 0;
  max-width: 27rem;
}

/* ---- Preislisten-Gliederung: Begriff links, Erklärung rechts --------- */

.teil { padding-block: clamp(2.75rem, 7vw, 4rem); }
.teil--erste { padding-top: clamp(5rem, 12vw, 7.5rem); }  /* Platz fuer das ueberstehende Blatt */

.teil__titel { font-size: clamp(1.6rem, 4.5vw, 2.1rem); margin-bottom: 1.6rem; }

.liste { border-top: 2px solid var(--tinte); }

.zeile {
  display: grid;
  gap: .15rem 2rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--falz);
}
@media (min-width: 40em) {
  .zeile { grid-template-columns: 14rem 1fr; align-items: baseline; }
}

.zeile__begriff { font-family: var(--schild-schrift); font-size: 1.2rem; }
.zeile__was { color: var(--bleistift); }

/* ---- Ablauf: nummeriert, weil es wirklich eine Reihenfolge ist ------- */

.schritte { list-style: none; counter-reset: s; margin: 0; padding: 0; border-top: 2px solid var(--tinte); }
.schritt {
  counter-increment: s;
  display: grid; grid-template-columns: 2rem 1fr; gap: 0 1.1rem;
  padding: 1.05rem 0; border-bottom: 1px solid var(--falz);
}
.schritt::before {
  content: counter(s) ".";
  font-family: var(--schild-schrift); font-size: 1.2rem; line-height: 1.35;
}
.schritt__was { font-family: var(--schild-schrift); font-size: 1.2rem; }
.schritt__dazu { color: var(--bleistift); }

/* ---- Schluss -------------------------------------------------------- */

.schluss { background: var(--schild); color: #fff; padding-block: clamp(2.75rem, 7vw, 4rem); }
.schluss__titel { font-size: clamp(1.6rem, 4.5vw, 2.1rem); margin-bottom: 1.2rem; }
.schluss p { max-width: 32rem; }
.schluss__gross {
  font-family: var(--schild-schrift);
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  line-height: 1.25;
  margin-top: 1.5rem;
}
.schluss__gross a { color: #fff; text-decoration: none; display: inline-block; }
.schluss__gross a:hover { text-decoration: underline; }
.schluss__adresse { color: #c3d0e2; font-size: .95rem; margin-top: 1.4rem; }

/* ---- Fuß ------------------------------------------------------------ */

.fuss { padding-block: 1.6rem; font-size: .93rem; color: var(--bleistift); }
.fuss__innen { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between; }
.fuss a { color: var(--bleistift); }

/* ---- Rechtstexte ---------------------------------------------------- */

.rechtstext { max-width: 34rem; }
.rechtstext h2 { font-size: 1.2rem; margin: 2rem 0 .4rem; }
.rechtstext h2:first-child { margin-top: 0; }

@media print {
  .tasten, .fuss { display: none; }
  .schild, .schluss { background: none !important; color: #000 !important; }
  .taste { border-color: #000; color: #000 !important; }
  body { font-size: 11pt; }
}