/* Übernommen aus igw-mieterportal src/site/schliff.css@925ee81 (0036 W8). Regeln wörtlich;
 * angepasst: mit Biome formatiert und nach Regel 4 geteilt (Reihenfolge unverändert).
 * Korn als /media/korn.svg statt data:-Adresse (CSP). */
/*
 * Feinschliff: Dinge, die man nicht bewusst sieht, aber spürt. Kommt als letzte Datei und regelt nur Details:
 * Druckgefühl der Knöpfe, gezeichnete Unterstreichungen, Fokus mit genug Kontrast, Zielgrößen am Handy,
 * ruhiges Korn über Fotos und 3D, optischer Randausgleich großer Zeilen.
 */
:root {
  /* Salbei für kleine Schrift auf hellem Grund: dunkler als --salbei-tief, damit 4,5:1 erreicht wird */
  --salbei-schrift: #4f675c;
  --korn: url("/media/korn.svg");
  interpolate-size: allow-keywords;
}
/* Kleine Salbei-Schrift auf hellem Grund */
.formular-erfolg .verb,
.leistung-paar dt,
.rechtstext-verzeichnis a::before,
.status {
  color: var(--salbei-schrift);
}
.status {
  border-color: var(--salbei-schrift);
}
/* Fokus: auf dunklem Grund Salbei, auf hellem Grund das dunkle Salbei, damit der Ring 3:1 erreicht */
:is(.hell, .abschnitt:not(.abschnitt-dunkel), .melden-dialog, .kopf[data-ton="hell"], .leer) :focus-visible {
  outline-color: var(--salbei-tief);
}
.melden-dialog .feld input:focus-visible,
.melden-dialog .feld textarea:focus-visible,
.melden-dialog .feld select:focus-visible {
  outline: none;
}
/* Knöpfe: beim Drücken gibt der Knopf kurz nach */
.knopf {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.14s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.knopf:active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: 0.06s;
}
.knopf:disabled {
  opacity: 0.55;
  cursor: progress;
}
/* Hover nur, wo es eine Maus gibt; am Handy bleibt sonst der Hover-Zustand nach dem Tippen hängen */
@media (hover: none) {
  .knopf-hell:hover {
    background: var(--kalk);
  }
  .knopf-dunkel:hover {
    background: var(--schiefer);
  }
  .knopf-linie:hover {
    border-color: rgba(246, 247, 245, 0.5);
    color: inherit;
  }
  .knopf-rahmen:hover {
    background: transparent;
    color: var(--schiefer);
    border-color: rgba(44, 44, 44, 0.4);
  }
  .bereich:hover img {
    transform: none;
    filter: saturate(0.85) brightness(0.82);
  }
  .bereich:hover::after {
    height: 34%;
  }
  .bereich:hover .bereich-titel {
    font-variation-settings: "wdth" 112;
  }
}
/* Links im Fließtext: die Linie liegt dünn darunter und zeichnet sich beim Überfahren neu von links */
/* :where hält die Spezifität bei null, damit Listen-Links mit eigener Gestalt (Fehlerseite, Verzeichnis) unberührt
 * bleiben */
:where(main p, main li, .formular-erfolg, .feld-zustimmung, .rechtstext-inhalt)
a:where(:not(.knopf, .fehler-wege a, .rechtstext-verzeichnis a)) {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  padding-bottom: 1px;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :where(main p, main li, .formular-erfolg, .feld-zustimmung, .rechtstext-inhalt)
    a:where(:not(.knopf, .fehler-wege a, .rechtstext-verzeichnis a)):hover {
    animation: nachzeichnen 0.55s cubic-bezier(0.2, 0.7, 0.1, 1);
  }
}
@keyframes nachzeichnen {
  0% {
    background-size: 100% 1px;
    background-position: 100% 100%;
  }
  45% {
    background-size: 0 1px;
    background-position: 100% 100%;
  }
  46% {
    background-position: 0 100%;
  }
  100% {
    background-size: 100% 1px;
    background-position: 0 100%;
  }
}
.fuss a:hover {
  text-decoration: none;
}
.fuss :is(.fuss-seiten, .fuss-recht, address) a {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition:
    background-size 0.35s cubic-bezier(0.2, 0.7, 0.1, 1),
    color 0.25s ease;
}
.fuss :is(.fuss-seiten, .fuss-recht, address) a:hover {
  background-size: 100% 1px;
}
/* Formulare: ein Feld zeigt sich erst als falsch, wenn man es verlassen hat */
.feld :is(input, textarea, select):user-invalid {
  border-color: #a4452f;
}
/* Erfolg: der Haken zeichnet sich im Strich der Seite */
.erfolg-haken {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  fill: none;
  stroke: var(--salbei-tief);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.erfolg-haken :is(circle, path) {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .formular-erfolg:not([hidden]) .erfolg-haken circle {
    animation: haken-zeichnen 0.7s cubic-bezier(0.65, 0, 0.35, 1) both;
  }
  .formular-erfolg:not([hidden]) .erfolg-haken path {
    animation: haken-zeichnen 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.55s both;
  }
}
@keyframes haken-zeichnen {
  from {
    stroke-dashoffset: 1;
  }
}
/* Aufklappen ohne Sprung */
details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.4s cubic-bezier(0.2, 0.7, 0.1, 1),
    content-visibility 0.4s allow-discrete;
}
details[open]::details-content {
  block-size: auto;
}
/* Große Zeilen: optischer Randausgleich, damit die erste Letter mit der Satzkante fluchtet, nicht ihr Weißraum */
:is(.seite-kopf h1, .abschnitt h2, .band h2, .melden-band h2, .fehlerseite h1, .bereiche h2, .leistungen h2) {
  margin-inline-start: -0.045em;
}
/* Zielgrößen am Handy: mindestens 44 px für alles, was man antippt */
@media (pointer: coarse) {
  .fuss :is(.fuss-seiten, .fuss-recht, address) a,
  .menue-post,
  .text-knopf,
  .zurueck,
  .schluss-post {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .wahl span {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
/* Korn: ein ruhendes, kaum sichtbares Korn verbindet Fotos und 3D zu einer Bildsprache */
:is(.kopf-bild, .landschaft-bild, .material-bild) {
  position: relative;
}
:is(.kopf-bild, .landschaft-bild, .material-bild)::after,
.buehne::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--korn);
  opacity: 0.07;
  mix-blend-mode: overlay;
}