@charset "UTF-8";

/*
 * frankhamburger.de – Grundlayout
 * Basis, Kopf, Raster, Karten, Inhaltsseiten und Fußzeile.
 * Werte: design-tokens.css · Schrift: fonts.css
 */

/* Basis
   ========================================================================== */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--fh-abstand-xl) var(--fh-abstand-l);
  background: var(--fh-farbe-flaeche);
  color: var(--fh-farbe-text);
  font-family: var(--fh-schrift);
  font-weight: var(--fh-schrift-normal);
  font-size: var(--fh-groesse-text);
  line-height: var(--fh-zeilenhoehe);
}

.fh-sprunglink {
  position: absolute;
  z-index: 10;
  left: var(--fh-abstand-m);
  top: calc(-1 * var(--fh-abstand-xl) - 1rem);
  padding: var(--fh-abstand-s) var(--fh-abstand-m);
  background: var(--fh-farbe-hintergrund);
  border-radius: var(--fh-radius);
}

.fh-sprunglink:focus {
  top: var(--fh-abstand-m);
}

.fh-nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Links
   ========================================================================== */

a {
  color: var(--fh-farbe-akzent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}

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

a:focus-visible {
  outline: var(--fh-fokus-rahmen);
  outline-offset: var(--fh-fokus-abstand);
  border-radius: 2px;
}

/* Externe Links: Symbol, für Screenreader zusätzlich als Text */
a[href^="http"]:not([href*="//frankhamburger.de"]):not([href*="//www.frankhamburger.de"]):not(.fh-karte)::after {
  content: "";
  content: "" / " (externer Link)";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.25em;
  background-color: currentColor;
  -webkit-mask: var(--fh-symbol-extern) no-repeat center / contain;
  mask: var(--fh-symbol-extern) no-repeat center / contain;
}

/* Blatt
   ========================================================================== */

.fh-blatt {
  width: 100%;
  max-width: var(--fh-inhalt-breite);
  margin: auto;
  padding: var(--fh-abstand-xl);
  background: var(--fh-farbe-hintergrund);
  border-radius: var(--fh-radius);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--fh-farbe-text) 6%, transparent),
    0 24px 60px color-mix(in srgb, var(--fh-farbe-akzent) 10%, transparent);
}

/* Kopf
   ========================================================================== */

.fh-kopf {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fh-abstand-l);
  padding-bottom: var(--fh-abstand-l);
}

.fh-kopf::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--fh-farbe-linie);
  transform-origin: left center;
  animation: fh-linie 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fh-linie {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.fh-name {
  margin: 0;
  font-size: var(--fh-groesse-name);
  font-weight: var(--fh-schrift-normal);
  line-height: 1.05;
  letter-spacing: var(--fh-laufweite-name);
  text-transform: uppercase;
  color: var(--fh-farbe-text);
}

.fh-name a {
  color: inherit;
  text-decoration: none;
}

.fh-name a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* Größe im festen Verhältnis zum Namen: Beide Zeilen sind gleich breit */
.fh-position {
  margin: var(--fh-abstand-s) 0 0;
  font-size: max(0.875rem, calc(var(--fh-groesse-name) * 0.382));
  font-weight: var(--fh-schrift-fett);
  letter-spacing: var(--fh-laufweite-name);
  text-transform: uppercase;
  color: var(--fh-farbe-akzent);
}

.fh-position span {
  white-space: nowrap;
}

.fh-leitsatz {
  margin: var(--fh-abstand-s) 0 0;
  font-size: max(1rem, calc(var(--fh-groesse-name) * 0.48));
  line-height: 1.3;
  letter-spacing: 0.015em;
  color: var(--fh-farbe-text-neben);
}

.fh-icon {
  flex: none;
  display: block;
  color: var(--fh-farbe-akzent);
}

/* Überschriften
   ========================================================================== */

.fh-titel {
  margin: 0 0 var(--fh-abstand-s);
  font-size: var(--fh-groesse-ueberschrift);
  font-weight: var(--fh-schrift-fett);
  letter-spacing: var(--fh-laufweite-titel);
  text-transform: uppercase;
  color: var(--fh-farbe-akzent);
}

/* Raster
   ========================================================================== */

.fh-raster {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: var(--fh-abstand-xl);
  margin-top: var(--fh-abstand-xl);
}

.fh-seitenleiste {
  align-self: start;
  padding: var(--fh-abstand-l);
  background: var(--fh-farbe-flaeche);
  border-radius: var(--fh-radius);
}

.fh-seitenleiste p {
  margin: 0;
  color: var(--fh-farbe-text-neben);
}

/* Karten
   ========================================================================== */

.fh-karten {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--fh-abstand-l);
}

.fh-karte {
  position: relative;
  display: block;
  padding: var(--fh-abstand-l) calc(var(--fh-abstand-l) + 2.5rem) var(--fh-abstand-l) var(--fh-abstand-l);
  background: var(--fh-farbe-karte);
  border: var(--fh-linie-staerke) solid var(--fh-farbe-karte-rand);
  border-radius: var(--fh-radius);
  color: var(--fh-farbe-text);
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.fh-karte:hover {
  transform: translateY(-2px);
  border-color: var(--fh-farbe-linie);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--fh-farbe-akzent) 14%, transparent);
}

.fh-karte:focus-visible {
  border-radius: var(--fh-radius);
}

.fh-karte-titel {
  display: block;
  font-size: var(--fh-groesse-kennzahl);
  font-weight: var(--fh-schrift-fett);
  line-height: 1.2;
  color: var(--fh-farbe-akzent);
}

.fh-karte-text {
  display: block;
  margin-top: var(--fh-abstand-xs);
  color: var(--fh-farbe-text-neben);
}

.fh-karte-hinweis {
  display: block;
  margin-top: var(--fh-abstand-s);
  font-size: var(--fh-groesse-klein);
  letter-spacing: 0.02em;
  color: var(--fh-farbe-text-neben);
}

.fh-karte-pfeil {
  position: absolute;
  right: var(--fh-abstand-l);
  top: 50%;
  font-size: 1.5rem;
  color: var(--fh-farbe-akzent);
  transform: translateY(-50%);
  transition: transform 200ms ease;
}

.fh-karte:hover .fh-karte-pfeil {
  transform: translate(4px, -50%);
}

/* Externe Ziele: Symbol statt Pfeil */
a.fh-karte[href^="http"] .fh-karte-pfeil {
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask: var(--fh-symbol-extern) no-repeat center / contain;
  mask: var(--fh-symbol-extern) no-repeat center / contain;
}

.fh-karte-haupt {
  padding-top: var(--fh-abstand-xl);
  padding-bottom: var(--fh-abstand-xl);
  background: var(--fh-farbe-akzent);
  border-color: var(--fh-farbe-akzent);
  color: var(--fh-farbe-hintergrund);
}

.fh-karte-haupt:hover {
  border-color: var(--fh-farbe-akzent);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--fh-farbe-akzent) 30%, transparent);
}

.fh-karte-haupt .fh-karte-titel,
.fh-karte-haupt .fh-karte-text,
.fh-karte-haupt .fh-karte-pfeil {
  color: var(--fh-farbe-hintergrund);
}

/* Inhaltsseiten
   ========================================================================== */

.fh-inhalt {
  margin-top: var(--fh-abstand-xl);
}

.fh-inhalt h1 {
  margin: 0 0 var(--fh-abstand-l);
  font-size: 1.75rem;
  font-weight: var(--fh-schrift-fett);
  letter-spacing: var(--fh-laufweite-titel);
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.fh-inhalt h2 {
  margin: var(--fh-abstand-l) 0 var(--fh-abstand-s);
  font-size: var(--fh-groesse-ueberschrift);
  font-weight: var(--fh-schrift-fett);
  letter-spacing: var(--fh-laufweite-titel);
  text-transform: uppercase;
  color: var(--fh-farbe-akzent);
}

.fh-inhalt p,
.fh-inhalt address {
  margin: 0 0 var(--fh-abstand-m);
  font-style: normal;
}

.fh-inhalt ul {
  margin: 0 0 var(--fh-abstand-m);
  padding-left: 1.25rem;
}

.fh-inhalt li::marker {
  color: var(--fh-farbe-akzent);
}

/* Bild im Text (Baustein „Text“, z. B. Referenzseite): volle Breite, Rahmen wie bei den Praxisbeispielen */
.fh-inhalt figure {
  margin: 0 0 var(--fh-abstand-m);
}

.fh-inhalt figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border: var(--fh-linie-staerke) solid var(--fh-farbe-karte-rand);
  border-radius: calc(var(--fh-radius) / 2);
}

.fh-inhalt figcaption {
  margin-top: var(--fh-abstand-xs);
  font-size: var(--fh-groesse-klein);
  color: var(--fh-farbe-text-neben);
}

.fh-inhalt .fh-karten-eintrag {
  margin-top: var(--fh-abstand-l);
}

/* Fußzeile
   ========================================================================== */

.fh-fuss {
  margin-top: var(--fh-abstand-xl);
  padding-top: var(--fh-abstand-l);
  border-top: var(--fh-linie-staerke) solid var(--fh-farbe-flaeche);
  font-size: var(--fh-groesse-klein);
  color: var(--fh-farbe-text-neben);
}

.fh-fuss ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--fh-abstand-s) var(--fh-abstand-l);
}

.fh-fuss a {
  color: var(--fh-farbe-text-neben);
}

.fh-fuss a[aria-current="page"] {
  color: var(--fh-farbe-text);
  text-decoration: none;
}

/* Breakpoints
   ========================================================================== */

@media (min-width: 48.0625rem) {
  /* Karten der Startseite gleich hoch, Inhalt mittig */
  .fh-raster .fh-karten {
    grid-auto-rows: 1fr;
  }

  .fh-raster .fh-karten-eintrag {
    display: flex;
  }

  .fh-raster .fh-karte {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 48rem) {
  body {
    padding: var(--fh-abstand-m);
  }

  .fh-blatt {
    padding: var(--fh-abstand-l);
  }

  .fh-kopf .fh-icon {
    width: 40px;
    height: 40px;
  }

  /* Symbol unten rechts: Name und Positionierung behalten die volle Breite */
  .fh-kopf:has(> .fh-icon) > .fh-icon {
    position: absolute;
    right: 0;
    bottom: calc(var(--fh-abstand-l) - 1rem);
  }

  .fh-kopf:has(> .fh-icon) > div {
    flex: 1;
  }

  .fh-kopf:has(> .fh-icon) > div > :last-child {
    padding-right: calc(40px + var(--fh-abstand-m));
  }

  .fh-raster {
    grid-template-columns: 1fr;
    gap: var(--fh-abstand-l);
    margin-top: var(--fh-abstand-l);
  }

  .fh-raster .fh-seitenleiste {
    order: 2;
  }

  .fh-fuss ul {
    justify-content: center;
  }
}

@media (max-width: 30rem) {
  .fh-inhalt h1 {
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fh-kopf::after {
    animation: none;
  }

  .fh-karte,
  .fh-karte-pfeil {
    transition: none;
  }

  .fh-karte:hover {
    transform: none;
  }

  .fh-karte:hover .fh-karte-pfeil {
    transform: translateY(-50%);
  }
}