/* Basis-Stile der Übergangsseite tammen.de.
 * Jeder Wert kommt aus tokens.css. Steht hier eine Zahl, die dort nicht steht, ist das ein Fehler.
 * Stand: 17.09.2026
 */

/* ------------------------------------------------------------------------
 * 1 Zurücksetzen und Grundlagen
 * ---------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--groesse-m);
  line-height: var(--zeile-mittel);
  font-weight: var(--gewicht-normal);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

/* Bewegung reduzieren: Endzustand sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------------
 * 2 Fokus und Sprungmarke
 * ---------------------------------------------------------------------- */

:focus-visible {
  outline: var(--fokus-rahmen);
  outline-offset: var(--fokus-abstand);
}

.sprungmarke {
  position: absolute;
  left: var(--raum-4);
  top: var(--raum-4);
  z-index: 10;
  padding: var(--raum-3) var(--raum-5);
  background: var(--flaeche-dunkel);
  color: var(--text-auf-dunkel);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dauer-kurz) var(--weich);
}

.sprungmarke:focus {
  transform: translateY(0);
}

/* Nur für Screenreader. Text bleibt im Barrierefreiheitsbaum, ist aber unsichtbar.
 * Kein display:none und kein visibility:hidden, die nehmen den Text auch dem
 * Screenreader weg. */
.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------------
 * 3 Raster
 * ---------------------------------------------------------------------- */

.bahn {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* ------------------------------------------------------------------------
 * 4 Markenleiste und Kopf
 * ---------------------------------------------------------------------- */

.markenleiste {
  height: var(--raum-1);
  background: var(--flaeche-akzent);
}

.kopf {
  padding-block: clamp(var(--raum-7), 1rem + 7vw, var(--raum-9));
}

.marke {
  display: flex;
  flex-direction: column;
  gap: var(--raum-5);
  align-items: flex-start;
  margin: 0;
  font-weight: var(--gewicht-normal);
}

.marke__zeichen {
  width: clamp(5rem, 3rem + 8vw, 9rem);
}

.marke__wort {
  font-size: var(--groesse-2xl);
  line-height: var(--zeile-eng);
  letter-spacing: var(--laufweite-weit);
  font-weight: var(--gewicht-stark);
  text-transform: uppercase;
}

.claim {
  margin-top: var(--raum-4);
  max-width: var(--breite-text);
  font-size: var(--groesse-l);
  line-height: var(--zeile-mittel);
  color: var(--text-weich);
}

/* Überschrift der Störungsseite. Trägt dort die H1, damit die Seite in der
 * Überschriftenliste eines Screenreaders ihren Zweck nennt und nicht nur den
 * Markennamen. Die Wortmarke steht darüber als Absatz. */
.kopf__meldung {
  margin-top: var(--raum-6);
  max-width: var(--breite-text);
  font-size: var(--groesse-xl);
  line-height: var(--zeile-eng);
  letter-spacing: var(--laufweite-eng);
}

.hinweis {
  margin-top: var(--raum-4);
  max-width: var(--breite-text);
  padding-left: var(--raum-5);
  border-left: 4px solid var(--akzent);
  color: var(--text);
}

.weiter {
  margin-top: var(--raum-6);
}

/* Der einzige Knopf im Projekt. Die Störungsseite wird jeder alten Deep-Link-URL
 * ausgeliefert, deshalb muss der Weg zur Startseite dort sichtbar sein und nicht
 * als Fließtextlink untergehen. */
.knopf {
  display: inline-block;
  padding: var(--raum-3) var(--raum-6);
  background: var(--flaeche-akzent);
  color: var(--text-auf-akzent); /* 4,80 auf --flaeche-akzent */
  text-decoration: none;
  font-weight: var(--gewicht-stark);
  border: 2px solid var(--flaeche-akzent);
  transition: background var(--dauer-kurz) var(--weich), border-color var(--dauer-kurz) var(--weich);
}

.knopf:hover,
.knopf:focus-visible {
  background: var(--akzent-tief);
  border-color: var(--akzent-tief);
  text-decoration: underline;
}

/* Der globale Fokusring ist --akzent-tief und hielte auf der roten Knopffläche nur
 * 1,52:1, also unter den 3:1 aus WCAG 1.4.11. Dass der Ring dank --fokus-abstand
 * auf der weißen Fläche daneben liegt, ist Zufall und bricht, sobald jemand den
 * Abstand ändert. Deshalb hier ein eigener Ring in Tinte: 4,38 gegen die Knopffläche,
 * 21,00 gegen den Seitengrund, trägt in beiden Fällen. */
.knopf:focus-visible {
  outline: var(--fokus-rahmen);
  outline-color: var(--text);
}

/* ------------------------------------------------------------------------
 * 5 Bildband
 * ---------------------------------------------------------------------- */

.band {
  margin: 0;
}

.band img {
  width: 100%;
  /* Seitenverhältnis gesetzt, damit beim Laden nichts springt (CLS 0) */
  aspect-ratio: 900 / 622;
  object-fit: cover;
}

@media (min-width: 48rem) {
  .band img {
    aspect-ratio: 1680 / 622;
    /* Deckel, damit das Band auf großen Schirmen nicht die halbe Höhe füllt.
     * object-fit: cover schneidet oben und unten, das Motiv liegt mittig. */
    max-height: 26rem;
  }
}

/* ------------------------------------------------------------------------
 * 6 Kontakt
 * ---------------------------------------------------------------------- */

.kontakt {
  padding-block: var(--raum-sektion);
}

.kontakt__titel {
  font-size: var(--groesse-s);
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
  color: var(--text-weich);
  font-weight: var(--gewicht-stark);
  padding-bottom: var(--raum-3);
  border-bottom: var(--rahmen);
}

.kontakt__gitter {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rinne);
  margin-top: var(--raum-6);
}

@media (min-width: 40rem) {
  .kontakt__gitter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kontakt__block {
  /* verhindert, dass Grid-Kinder ihre Spalte sprengen */
  min-width: 0;
}

.kontakt__marke {
  font-size: var(--groesse-l);
  font-weight: var(--gewicht-stark);
  letter-spacing: var(--laufweite-eng);
  margin-bottom: var(--raum-2);
}

address {
  font-style: normal;
  line-height: var(--zeile-weit);
}

.daten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--raum-2) var(--raum-5);
  line-height: var(--zeile-weit);
}

.daten dt {
  color: var(--text-weich);
  font-size: var(--groesse-s);
}

.daten dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

a {
  color: var(--text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

.fuss {
  background: var(--flaeche-getoent);
  border-top: var(--rahmen);
  padding-block: var(--raum-6);
  font-size: var(--groesse-s);
  color: var(--text-weich);
}

.fuss__inhalt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3) var(--raum-6);
  align-items: baseline;
  justify-content: space-between;
}

.fuss__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3) var(--raum-5);
}

/* ------------------------------------------------------------------------
 * 8 Rechtstexte (Impressum, Datenschutz)
 * ---------------------------------------------------------------------- */

.recht {
  padding-block: var(--raum-sektion);
}

.recht__zurueck {
  display: inline-block;
  margin-bottom: var(--raum-6);
  font-size: var(--groesse-s);
}

.recht h1 {
  font-size: var(--groesse-xl);
  line-height: var(--zeile-eng);
  letter-spacing: var(--laufweite-eng);
  max-width: var(--breite-text);
}

.recht h2 {
  margin-top: var(--raum-8);
  margin-bottom: var(--raum-3);
  font-size: var(--groesse-l);
  line-height: var(--zeile-eng);
  max-width: var(--breite-text);
}

.recht p,
.recht ul {
  max-width: var(--breite-text);
  line-height: var(--zeile-weit);
}

.recht p + p {
  margin-top: var(--raum-4);
}

.recht ul {
  margin-top: var(--raum-4);
  padding-left: var(--raum-5);
  list-style: disc;
}

.recht li + li {
  margin-top: var(--raum-2);
}

.recht address {
  margin-top: var(--raum-4);
}

/* Hervorgehobener Block. Art. 21 Abs. 4 DSGVO verlangt, dass der Hinweis auf das
 * Widerspruchsrecht getrennt von den übrigen Informationen dargestellt wird. */
.hervor {
  margin-top: var(--raum-8);
  /* Seitenpolster klein halten: der Block sitzt schon innerhalb von --rand,
   * bei 320 px bliebe sonst zu wenig Textbreite übrig. */
  padding: var(--raum-5) var(--raum-4);
  background: var(--flaeche-getoent);
  border-left: 4px solid var(--akzent);
}

@media (min-width: 40rem) {
  .hervor {
    padding: var(--raum-6);
  }
}

.hervor h2 {
  margin-top: 0;
}

/* Sichtbare Markierung für Angaben, die der Kunde noch liefern muss.
 * Vor dem Upload muss die Seite frei davon sein, siehe docs/offene-punkte.md. */
.offen {
  background: var(--akzent-weich);
  border-bottom: 2px solid var(--akzent);
  padding: 0 var(--raum-1);
  font-weight: var(--gewicht-stark);
}