/* CSS full reset of browser default from meyerweb */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* End of full reset k */

/* ------------------------- Design-Tokens --------------------------------

   Ein Wert an einer Stelle statt derselbe Wert an dreissig Stellen. Alle
   Werte sind aus dem Bestand abgeleitet, damit der Token-Block allein noch
   nichts veraendert - die Herkunft steht jeweils dahinter.

   Breakpoint-Leiter: 30rem (480) - 48rem (768) - 64rem (1024)

   Die drei Werte stehen als Kommentar und nicht als Custom Property, weil
   Custom Properties in Media-Query-Bedingungen nicht funktionieren und es
   ohne Build-Schritt keinen Praeprozessor gibt, der sie einsetzen koennte.
   Sie sind also reine Konvention. Notation durchgehend min-width, also
   mobile-first. Der Bestand mischt sieben Breakpoints (300, 500, 767, 800,
   1000px, 32em, 50em) in vier Syntaxvarianten; die werden Schritt fuer
   Schritt auf diese Leiter gezogen.                                       */

:root {
  /* --- Farben ------------------------------------------------------- */
  --c-brand: #deebd6; /* Markenfarbe */
  --c-shell: #333; /* dunkler Balken, aktuell nirgends im Einsatz */
  --c-bg: #fdfdfd; /* Seitenhintergrund */
  --c-surface: #fff; /* Karten, Tabellen */
  --c-ink: #2e2e2e; /* Fliesstext und Ueberschriften */
  --c-ink-soft: #5a5a5a; /* Sekundaertext, Footer */
  --c-line: #ccc; /* Trennlinien */
  --c-line-soft: #f0f0f0; /* Zellrahmen, Zebrastreifen */
  --c-muted: #f1f1f1; /* neutrale Flaechen */
  --c-focus: #1a5c2e; /* Fokusring: 7,9:1 auf --c-bg, also AAA */

  /* Navigation. Hell in der Markenfarbe, also derselbe Ton wie der
     Logo-Balken darueber - Kopfbereich und Leiste bilden damit einen Block.
     Zum Zurueckdrehen auf dunkel genuegen diese drei Zeilen:
       --c-nav-bg: var(--c-shell);
       --c-nav-glass: rgb(51 51 51 / 88%);
       --c-nav-ink: #fff;                                              */
  --c-nav-bg: var(--c-brand);
  --c-nav-glass: rgb(222 235 214 / 85%);
  --c-nav-ink: var(--c-ink);

  /* --- Abstaende ----------------------------------------------------
     Der Bestand kennt 30 verschiedene margin- und 22 padding-Werte ohne
     erkennbare Skala (2, 3, 5, 6, 8, 10, 12, 14, 15, 16, 20, 30, 40, 50,
     70, 100px). Diese acht Stufen decken alles davon sinnvoll ab.      */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* --- Radien: 12 Werte im Bestand, hier vier ------------------------ */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* --- Schatten -----------------------------------------------------
     Der Bestand kannte fuenf Varianten, davon drei harte einfarbige
     (3px 3px 4px #333). Jetzt zwei Ebenen: -1 fuer ruhende Flaechen,
     -2 fuer angehobene Zustaende wie Hover.

     --shadow-nav ist ein Sonderfall: negativer Spread, damit der Schatten
     nur nach unten austritt. Ein allseitiger wuerde auf den gleichfarbigen
     Logo-Balken darueber strahlen und dort eine Naht erzeugen.         */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 8%);
  --shadow-2: 0 6px 20px rgb(0 0 0 / 12%);
  --shadow-nav: 0 4px 10px -4px rgb(0 0 0 / 18%);

  /* --- Typografie ----------------------------------------------------
     Systemschrift: der Browser nimmt, was das Geraet ohnehin geladen hat -
     Segoe UI unter Windows, San Francisco auf Apple, Roboto auf Android.
     Null Requests, null Bytes, kein Flackern beim Laden. Arial bleibt als
     vorletzter Fallback stehen, damit sich nichts verschlechtert.
     Quotes um mehrteilige Namen, weil stylelint sie in einer Custom
     Property sonst fuer Keywords haelt.                                 */
  --font-sans:
    system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif;
  --lh-body: 1.6; /* die 10x vorhandenen 160% */
  --lh-heading: 1.2;

  /* Schriftgroessen. Der Bestand kannte 17 Werte, gemischt in px, rem und
     Prozent. Sechs Stufen decken alles ab; die beiden Ueberschriften
     wachsen mit dem Viewport statt an Breakpoints zu springen. */
  --fs-xs: 0.75rem; /* 12px */
  --fs-sm: 0.875rem; /* 14px */
  --fs-base: 1rem; /* 16px */
  --fs-body: 1.125rem; /* 18px, der Fliesstext */
  --fs-lg: 1.25rem; /* 20px */
  --fs-h2: clamp(1.375rem, 1rem + 1.4vw, 1.75rem);
  --fs-h1: clamp(1.625rem, 1.15rem + 1.9vw, 2.125rem);

  /* --- Layout -------------------------------------------------------- */
  --wrap: 75rem; /* = die bestehenden 1200px */
  --lesebreite: 90ch; /* Breite der Textspalte in .prose */
  --nav-h: 3.5rem; /* Hoehe der Navileiste, fuer scroll-margin-top */
  --gutter: clamp(1rem, 3vw, 2rem); /* Seitenrand, waechst mit dem Viewport */
}

/* ------------------------- Design-Tokens Ende ---------------------------- */

/* ------------------------- Fokus und Sprungmarken ------------------------

   Sichtbarer Fokus fuer die ganze Seite. :focus-visible statt :focus, damit
   der Ring nur bei Tastaturbedienung erscheint und nicht bei jedem Mausklick.
   Er schlaegt auch das "outline: 0" in "details summary" weiter unten, das
   den Fokus dort bisher komplett unterdrueckt hat.                         */

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

/* Die Leiste klebt oben. Ohne diesen Abstand landen alle 46 Sprungmarken
   (#bsp1 bis #bsp8 in beispiele.html, die Begriffe in steuerbegriffe.html)
   verdeckt darunter. */
[id] {
  scroll-margin-top: calc(var(--nav-h) + var(--space-3));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Bewusst getrennt vom body-Block des Resets oben: dort steht nur die
   Reset-Regel line-height, hier die Site-Styles. Properties ueberschneiden
   sich nicht. */
/* stylelint-disable-next-line no-duplicate-selectors */
body {
  background-color: var(--c-bg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
}

/* Einspaltig. Frueher lag hier ein Flexbox-Layout mit #main auf 75% und
   #articles auf 25% daneben - unterhalb von 1000px wurde die Sidebar
   ersatzlos ausgeblendet, ihre drei internen Links waren auf Mobilgeraeten
   also nie zu sehen. Jetzt laeuft #main ueber die volle Breite und
   #articles steht als Abschnitt darunter. */
#wrapper {
  max-width: var(--wrap);
  margin: 0 auto;
}

#main {
  width: 100%;
  background-color: var(--c-bg);
}

/* Der frueher eigenstaendige Logo-Balken (#top mit .logo darin) ist in die
   Navileiste gewandert: Logo links, Menue rechts. Damit bleibt das Logo
   auch stehen, wenn das Menue zugeklappt ist.

   Sticky sitzt am <header>, nicht am <nav>: ein sticky Element klebt nur
   innerhalb seines Elternelements. Waere das <nav> sticky und das <header>
   nur so hoch wie das <nav>, koennte es sich keinen Pixel bewegen. */

/* "float: left" und das zugehoerige "overflow: hidden" stammten aus dem
   alten Zweispalten-Layout und sind seit dem Umbau auf eine Spalte ohne
   Zweck - aber nicht ohne Wirkung: den Float loeste zuletzt nichts mehr
   auf. Weder #main noch #wrapper haben einen Clearfix, und der Footer hat
   beim Umbau sein "clear: both" verloren. Auf 56 Seiten stand zufaellig
   #articles dazwischen, ein Grid-Container mit eigenem
   Formatierungskontext, der unter den Float rutscht. Auf steuertipps.html
   ist dieser Abschnitt entfallen - und der Footer sass daraufhin oben
   rechts neben dem Inhalt. */
#content {
  width: 100%;
  font-size: var(--fs-body);

  /* Waren 15px. Der Titel klebte damit fast an der Navileiste - seit die
     klebt und die Galerie weg ist, faellt das staerker auf. */
  padding-block: var(--space-8) var(--space-5);
  color: var(--c-ink);
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* Hier lagen bis Schritt 14 zwoelf Regeln, die die Typografie an die ID
   #content banden. Sie sind vollstaendig nach .prose gewandert; #content
   traegt jetzt nur noch Layout und die Grundfarbe, von der die Klassen
   darin per "inherit" ausgehen. Die Schriftgroesse der Aufklapper steht in
   "details summary" - alle 33 <summary> der Site liegen in #content, das
   Ergebnis ist dasselbe.                                                 */

ul {
  list-style-position: outside;
  line-height: 160%;
}

/* Der Footer trug einen dunklen Balken (#333) mit weisser Schrift und
   setzte damit einen harten Abschluss unter jede Seite. Jetzt in der Farbe
   des Seitenhintergrunds mit dunkler Schrift; eine feine Linie oben trennt
   ihn ab, damit er nicht mit dem Inhalt verschwimmt.

   Liegt seit dem Layout-Umbau ausserhalb von #wrapper und wuerde sonst
   ueber die volle Fensterbreite laufen - deshalb dieselbe Begrenzung
   wie #top. */
#footer {
  max-width: var(--wrap);
  margin: 0 auto;
  background-color: var(--c-bg);
  color: var(--c-ink-soft);
  border-top: 1px solid var(--c-line);
  padding: var(--space-4) var(--space-2);
  font-size: var(--fs-sm);
  display: flex;
  justify-content: space-between;
}

#footer p {
  margin: var(--space-2) var(--space-5);
}

#footer a {
  color: inherit;
  font-weight: bold;
  text-decoration: none;
}

#footer a:hover {
  text-decoration: underline;
}

.startbanner {
  margin: 40px 20px;
  display: flex;
  align-items: center;
  background: var(--c-brand);
  padding: 0;
  min-height: 30px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

.startbanner img {
  height: auto;
  width: 50px;
}

.startbanner span {
  font-weight: 400;
  margin: 5px 20px;
  line-height: 160%;
}

.normal {
  text-decoration: none;
}

.adsense {
  margin: 10px 20px;
}

/* Hiess .grab und trug cursor: grab - das signalisiert Ziehen, nicht
   Aufklappen. Der Klassenname bleibt vorerst, er steht an 33 <summary>. */
.grab {
  cursor: pointer;
  padding: 15px;
}

.bold,
strong {
  font-weight: bold;
}

.right {
  float: right;
}

.italic,
em {
  font-style: italic;
}

.centerimage {
  margin: 5px auto;
  width: 90%;
}

.center {
  text-align: center;
}

.responsive {
  margin: 20px 0;
  width: 100%;
  height: auto;
}

.responsive80100 {
  margin: 20px 0;
  width: 100%;
  height: auto;
}

@media (min-width: 48rem) {
  .responsive80100 {
    margin: 20px auto;
    width: 80%;
  }
}

/* ------------------------- Navigation ------------------------------------

   Mobile-first: unterhalb von 64rem sind die Menuepunkte verborgen, bis der
   Hamburger sie aufklappt. Ab 64rem stehen sie nebeneinander und der
   Schalter verschwindet. Das Logo bleibt in beiden Faellen stehen.

   Sticky sitzt am <header>, nicht am <nav>: ein sticky Element klebt nur
   innerhalb der Grenzen seines Elternelements. Waere das <nav> sticky und
   das <header> nur so hoch wie das <nav>, koennte es sich keinen Pixel
   bewegen - ein Fehler, den man erst beim Scrollen sieht.

   Sticky statt fixed, weil ein sticky Element im normalen Fluss bleibt: es
   entsteht weder ein Loch noch ein Reflow und damit strukturell kein
   Layout-Shift. "fixed" haette ein hartkodiertes padding-top am body
   erzwungen, das genau dann bricht, wenn die Nav umbricht.

   Voraussetzung: kein Vorfahre darf overflow tragen, das wuerde sticky
   stillschweigend abschalten. Ueber .site-header liegen nur html und body,
   und die haben keins.                                                   */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100; /* der einzige andere z-index im Bestand ist 90 */
  background-color: var(--c-nav-bg);
  color: var(--c-nav-ink);

  /* Schatten nur nach unten: negativer Spread haelt ihn davon ab, seitlich
     oder nach oben auszutreten. */
  box-shadow: var(--shadow-nav);
}

/* Leicht durchscheinend, damit der Inhalt sichtbar darunter durchlaeuft -
   aber nur dort, wo der Browser den Weichzeichner beherrscht. Ohne ihn
   waere die Leiste bloss milchig statt unscharf. */
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .site-header {
    background-color: var(--c-nav-glass);
    backdrop-filter: saturate(1.4) blur(8px);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
  }
}

.topnav {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end; /* Menue rechtsbuendig */
  gap: var(--space-1);
  padding: var(--space-2) var(--gutter);
}

/* Das auto-Margin schiebt alles Folgende nach rechts und setzt das Logo
   damit an den linken Rand - ohne zweiten Container. */
.logo-link {
  margin-inline-end: auto;
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
}

/* Zwei Groessen: 1,5rem mobil, 60px ab 64rem (siehe Media Query am Ende des
   Navigationsabschnitts). Die Breite ergibt sich jeweils aus dem
   Seitenverhaeltnis der width/height-Attribute am <img> (384:144).

   Diese Attribute geben uebrigens nicht die Groesse vor: sie sind
   Praesentationshinweise mit der niedrigsten Prioritaet und werden von
   jeder CSS-Regel geschlagen. Ihr Zweck ist das Seitenverhaeltnis, damit
   der Browser den Platz reserviert, bevor das Bild geladen ist. */
.logo {
  display: block;
  width: auto;
  height: 1.5rem;
}

/* :not(.logo-link) ist hier tragend, nicht kosmetisch: ohne die Ausnahme
   wuerde "display: none" auch das Logo treffen und es mobil verschwinden
   lassen - genau das, was es nicht soll. */
.topnav a:not(.logo-link) {
  display: none; /* mobil verborgen, .topnav--open klappt sie auf */
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  text-align: center;
  font-size: var(--fs-body);
}

/* Frueher ein harter Invert auf #ddd mit schwarzer Schrift. Jetzt ein
   dezentes Abdunkeln - auf der hellen Leiste wuerde Aufhellen nichts
   zeigen. */
.topnav a:hover {
  background-color: rgb(0 0 0 / 8%);
}

.topnav .logo-link:hover {
  background-color: transparent;
}

.topnav--open a:not(.logo-link) {
  display: block;
  width: 100%;
}

/* Der Hamburger ist seit Schritt 6 ein <button>. Der Browser gibt Buttons
   eigene Schrift, Rahmen und Hintergrund - ohne Reset saesse ein graues
   Kaestchen in der Leiste. Die drei Balken sind <span> und damit inline;
   sie brauchen display: block, die frueheren <div> hatten es von Haus aus. */
.icon {
  display: block;
  background: none;
  border: 0;
  padding: var(--space-3);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.icon span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: currentcolor; /* folgt der Schriftfarbe der Leiste */
  margin: 3px 0;
}

@media (min-width: 64rem) {
  .topnav a:not(.logo-link) {
    display: block;
    width: auto; /* hebt die volle Breite aus .topnav--open wieder auf */
  }

  .topnav .icon {
    display: none;
  }

  .logo {
    height: 60px;
  }
}

/* ------------------------- Navigation Ende ------------------------------ */

@media (min-width: 64rem) {
  .startbanner {
    margin: 40px 100px;
    padding: 0 100px;
  }

  .startbanner span {
    font-weight: bold;
    margin: 0;
  }
}

/* Suchfeld auf steuerbegriffe.html. Die festen 400px liefen auf schmalen
   Geraeten ueber den Rand - jetzt volle Breite bis zu dieser Grenze. */
#myInput {
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  padding: var(--space-3);
  font-size: var(--fs-base);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  margin-block: var(--space-5) 0;
}

#myInput:focus {
  outline: 3px solid var(--c-line);
}

/* Vorschlagsliste, per JavaScript ein- und ausgeblendet. Gleiches Problem
   wie beim Eingabefeld: min-width 400px sprengte schmale Schirme. */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--c-muted);
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
  z-index: 90;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: var(--c-ink);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: var(--c-muted);
}

/* ------------------------- Tables Start ------------------------------ */

/* Table Styles */

.table-wrapper {
  margin: 20px;
  border-radius: var(--radius-md);
  overflow: auto;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* Die runden Ecken sitzen am Wrapper, nicht an der Tabelle: mit
   border-collapse: collapse ignoriert eine Tabelle border-radius, und der
   farbige Hintergrund der Kopfzeile wuerde die oberen Ecken ohnehin wieder
   eckig fuellen. overflow: auto schneidet beides sauber ab und laesst
   breite Tabellen auf schmalen Geraeten seitlich scrollen, statt das
   Layout zu sprengen. */
.table-wrapper > .fl-table {
  border-radius: 0;
}

/* Die Tabellen standen auf 14px, waehrend der Fliesstext 18px hat - sie
   wirkten dadurch wie eine Fussnote. Jetzt 1rem mit mehr Luft in den
   Zellen. Gilt fuer alle 17 Seiten mit Tabellen, nicht nur die
   umgestellten. */
.fl-table {
  font-size: var(--fs-base);
  font-weight: normal;
  border: none;
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  background-color: var(--c-surface);
  line-height: var(--lh-body);
}

.fl-table td,
.fl-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
}

.fl-table td {
  border-right: 1px solid var(--c-line-soft);
  border-left: 1px solid var(--c-line-soft);
}

.fl-table thead th {
  color: var(--c-ink);
  background: var(--c-brand);
  font-weight: bold;
}

.fl-table tr:nth-child(even) {
  background: var(--c-line-soft);
}

@media (min-width: 48rem) {
  .table-wrapper {
    margin: 30px 70px;
  }
}

/* ------------------------- Tables End ------------------------------ */

/* ------------------------- Beispiel-Inhaltsverzeichnis --------------------

   Ersetzt die acht Flipkarten auf beispiele.html. Die haben auf Touch nie
   funktioniert: die Rueckseite mit der Formularliste erschien nur beim
   Hovern, die Mehrheit der Besucher hat sie also nie gesehen. Ausserdem
   schnitt die feste Hoehe von 300px laengere Texte ab, und zwei Karten
   trugen ein ungueltiges href an einem <div>.

   Jetzt eine nummerierte Liste: Kurzbeschreibung und benoetigte Formulare
   stehen gleichzeitig da, die Nummern kommen aus dem <ol>.             */

/* Ohne Karten-Optik: keine Flaeche, kein Schatten, kein Rahmen. Das
   Verzeichnis ist Teil des Textes und soll nicht als eigener Kasten
   danebenstehen. */
.bsp-index {
  margin-block: var(--space-6);
}

.bsp-index h2 {
  margin: 0 0 var(--space-4);
  padding: 0;
  font-size: var(--fs-lg);
  font-weight: bold;
  line-height: var(--lh-heading);
  text-align: left;
}

.bsp-index ol {
  list-style: decimal;
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-4);
  line-height: var(--lh-body);
}

.bsp-index a {
  font-weight: bold;
  text-decoration: none;
  color: inherit;
}

.bsp-index a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.bsp-index-formulare {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
}

/* ------------------------- Inhaltsverzeichnis Ende ---------------------- */

/* ------------------------- Details Start ----------------------------- */
details[open] summary ~ * {
  animation: open 0.3s ease-in-out;
}

@keyframes open {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

details summary::-webkit-details-marker {
  display: none;
}

details summary {
  width: 100%;
  padding: 0.5rem 0;
  border-top: 1px solid var(--c-line);
  position: relative;
  cursor: pointer;

  /* 18px statt der frueheren 1rem: der Wert kam bisher aus
     "#content summary" und wurde beim Absenken der ID-Spezifitaet
     hierher gezogen. Absolut notiert wie zuvor, damit identisch. */
  font-size: var(--fs-body);

  /* War 300, also Light. Im Systemschrift-Stack faellt das deutlich aus
     dem Fliesstext heraus - genau das war als "andere Schriftart"
     aufgefallen. Fett statt duenn, passend zur Regel "anklickbar = fett",
     die auch fuer Links gilt. */
  font-weight: bold;
  list-style: none;
  outline: 0;
}

details summary::after {
  content: "+";
  color: var(--c-ink);
  position: absolute;
  line-height: 0;
  margin-top: 0.75rem;
  right: 0;
  font-weight: 200;
  transform-origin: center;
  transition: 200ms linear;
}

details[open] summary::after {
  transform: rotate(45deg);
  font-size: 2rem;
}

/* ------------------------- Details End ----------------------------- */

/* ------------------------- Download Button Start ------------------- */

.download-btn {
  background-color: var(--c-brand);
  border-radius: var(--radius-md);
  padding: 12px 30px;
  cursor: pointer;
  text-decoration: none;
}

/* ------------------------- Download Button End --------------------- */

/* ------------------------- Inline-Icons Start ---------------------- */

/* Ersetzen die frueher eingebundene Font-Awesome-Bibliothek. Deren
   Schriftdateien fehlten im Repo wie auf dem Server (404), die Icons
   wurden also gar nicht angezeigt. Genutzt waren nur zwei Symbole. */

/* Container fuer die <symbol>-Definitionen, selbst nicht sichtbar. */
.svg-symbole {
  position: absolute;
}

.inline-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.stern {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}

/* ------------------------- Inline-Icons End ------------------------ */

/* ------------------------- Startseite Video Start -------------------- */

.bsp3video {
  border-radius: var(--radius-md);
  width: 90%;
  margin: 30px auto;
  display: block;
  box-shadow: var(--shadow-2);
}

@media (min-width: 48rem) {
  .bsp3video {
    width: 70%;
  }
}

/* ------------------------- Startseite Video End ---------------------- */

/* ------------------------- Startseite Browser Start -------------------- */

* {
  box-sizing: border-box;
}

/* The browser window */
.container {
  border: 3px solid var(--c-muted);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin: 30px auto;
  width: 90%;
}

/* Container for columns and the top "toolbar" */
.row {
  padding: 10px;
  background: var(--c-muted);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
}

.left {
  width: 15%;
}

/* Nicht mit dem .right-Block weiter oben zusammenfuehren: dazwischen liegt
   .column { float: left }. Beide haben Spezifitaet (0,1,0), es entscheidet
   also die Reihenfolge. Wuerde float: right hierher wandern, wuerde es
   .column schlagen und das dreispaltige Layout kippen. */
/* stylelint-disable-next-line no-duplicate-selectors */
.right {
  width: 10%;
}

.middle {
  width: 75%;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Three dots */
.browserdot {
  margin-top: 4px;
  height: 10px;
  width: 10px;
  background-color: var(--c-line);
  border-radius: 50%;
  display: inline-block;
}

/* War ein <input type="domain">, also ein Formularfeld ohne Label und ohne
   Funktion - Lighthouse hat es als "Form elements do not have associated
   labels" geruegt. Es ist reine Dekoration im Browser-Mockup und deshalb
   jetzt ein <span>. Der Typ "domain" existiert ohnehin nicht, Browser
   behandelten ihn als "text". */
.browser-url {
  display: block;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--c-surface);
  color: var(--c-ink-soft);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-sm);
  line-height: 1.5;

  /* Keine feste Hoehe und kein Abschneiden: mit "height: 25px" und
     "overflow: hidden" passte die Zeile nicht in den Innenraum, der Text
     wurde unten gekappt. "text-overflow: ellipsis" hat die URL zusaetzlich
     gekuerzt. Jetzt bestimmt der Inhalt die Hoehe, und lange Adressen
     brechen um statt zu verschwinden. */
  overflow-wrap: anywhere;
}

/* Three bars (hamburger menu) */
.bar {
  width: 17px;
  height: 3px;
  background-color: var(--c-ink-soft);
  margin: 3px 0;
  display: block;
}

/* Der Innenraum des Mockups, also die nachgestellte Seite unter der
   Adressleiste. Der Abstand zur Rahmenkante kam bis Schritt 14 vom
   "margin: 10px 20px" der geloeschten Absatzregel; seitdem klebte der Text
   an den Kanten. Jetzt traegt ihn der Container selbst - dieselbe Aufteilung
   wie bei .tipps oder .card. */
.content {
  padding: var(--space-5);
}

/* On smaller screens, decrease text size */
@media (min-width: 30rem) {
  .browserdot {
    height: 12px;
    width: 12px;
  }
}

/* ------------------------- Startseite Browser End ---------------------- */

/* ------------------------- Startseite ELSTER Start --------------------- */

img {
  vertical-align: middle;
  display: block;
  border: 0;
  width: 100%;
  height: auto;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: 30px;
}

/* Next & previous buttons.
   Seit Schritt 6 echte <button>: vorher waren es <a> ganz ohne href, also
   Links ohne Ziel und ohne zugaenglichen Namen. Der Browser-Standardstil
   von Buttons muss deshalb zurueckgesetzt werden - als <a> gab es weder
   Rahmen noch Hintergrund. */
.prev,
.next {
  background: none;
  border: 0;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: var(--c-ink);
  font-weight: bold;
  font-size: var(--fs-body);
  transition: 0.6s ease;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgb(0 0 0 / 80%);
  color: var(--c-surface);
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

/* ------------------------- Startseite Elster End ----------------------- */

/* --------------- Bildvariante nach Viewport ---------------------------
   Hiess frueher .taxfixLarge / .taxfixSmall. Der Name war irrefuehrend:
   die Klassen haben nie etwas mit Taxfix zu tun gehabt, sondern schalten
   zwischen einer breiten und einer schmalen Fassung desselben Bildes um.
   Getragen haben sie unter anderem den WISO-Banner, allgemein-bildung.de
   und eine Kleinunternehmer-Illustration.                             */

.nur-breit {
  display: none;
}

@media (min-width: 48rem) {
  .nur-breit {
    display: block;
  }

  .nur-schmal {
    display: none;
  }
}

/* --------------- Bildvariante Ende ------------------------------------ */

/* ------------------------- Startseite More-Button Start --------------- */

.morebtn {
  width: 120px;
  height: 50px;
  margin: 30px auto;
  font-size: var(--fs-base);
  background: var(--c-brand);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius-md);
  cursor: -webkit-grab;
  cursor: grab;
  color: var(--c-ink);
}

.blackhover:hover {
  background: var(--c-ink);
  color: var(--c-surface);
  transition: background-color 200ms linear;
}

/* ------------------------- Startseite More-Button End ---------------- */

/* Die Sidebar ist keine Sidebar mehr: sie steht als Abschnitt unter dem
   Artikel und ist auf allen Geraeten sichtbar. Die drei Karten stehen
   nebeneinander, solange Platz ist, und rutschen sonst untereinander -
   auto-fit erledigt das ohne Media Query.

   Die Breite richtet sich nach --lesebreite, damit der Block buendig unter
   der Textspalte sitzt statt ueber die vollen 1200px zu laufen. */
#articles {
  /* Volle Wrapper-Breite statt der Lesebreite: nebeneinander haben die drei
     Karten hier genug Platz, waehrend sie in der schmaleren Textspalte
     gedraengt wirkten.

     Kein "width: 100%": ein Block-Element fuellt seinen Container ohnehin.
     Die Angabe setzt dagegen die *Inhaltsbreite* auf die volle
     Containerbreite, der Innenabstand kommt dann obendrauf - ohne globales
     border-box lief die Kartenspalte damit auf schmalen Geraeten um zwei
     Gutter ueber den rechten Rand hinaus. */
  padding-inline: var(--gutter);
  padding-block: var(--space-7);
  display: grid;

  /* Feste Spaltenzahl statt repeat(auto-fit, minmax(...)). auto-fit klappt
     leere Spuren zusammen, damit die Karten die Breite fuellen - aber nur,
     wenn wirklich keine Spur belegt ist. Die Ueberschrift darueber spannt
     mit "grid-column: 1 / -1" ueber alle Spuren und belegt sie damit alle.
     Nichts konnte mehr zusammenklappen, und die drei Karten sassen schmal
     und linksbuendig in den ersten drei von fuenf Spuren. */
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
  color: var(--c-ink);
}

/* Die Kartenspalte liegt ausserhalb von #content und wurde von .prose nie
   erreicht. Ihre Linkfarbe kam deshalb aus fuenf Regeln, eine je Zustand,
   alle mit demselben Wert. "inherit" am <a> erledigt alle fuenf. */
#articles a {
  color: inherit;
  text-decoration: none;
}

/* Die Themengruppen auf steuertipps.html nutzen dasselbe Gitter wie die
   Karten unter dem Artikel - gleiche Bausteine, gleiche Anordnung. */
.blogcontainer {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 48rem) {
  #articles,
  .blogcontainer {
    grid-template-columns: repeat(2, 1fr);
  }
}

.articles-titel {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 0 var(--space-2);
  font-size: var(--fs-lg);
  font-weight: bold;
  line-height: var(--lh-heading);
  border-bottom: 1px solid var(--c-line);
}

/* Das Bild lief bisher mit 20px Rand in der Karte. Jetzt randlos ueber die
   volle Kartenbreite - die abgerundeten Ecken schneidet das overflow:
   hidden der Karte ab. */
.blogimgcontainer {
  margin: 0;
}

.blogimg {
  width: 100%;
  height: auto;
}

/* min-height: 400px erzeugte klaffende Luecken, wenn der Text kurz war;
   im Grid sorgt align-items: start ohnehin fuer gleiche Oberkanten. Der
   harte Schatten 2px 2px 4px #333 weicht der weichen Variante. */
.card {
  background-color: var(--c-surface);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius-md); /* derselbe Radius wie die Tabellen */
  overflow: hidden;
  height: 100%;
}

/* -------- Steuertipps --------- */

.tipps {
  background: var(--c-brand);
  padding: 20px;
  border-radius: var(--radius-md);
}

.tippsContainer {
  background: var(--c-brand);
  margin: 0 40px;
  padding: 20px;
  border-radius: var(--radius-md);
}

.blogintro {
  font-weight: 600;
}

.responsiveBlog {
  margin: 10px auto;
  width: 80%;
  height: auto;
  display: block;
}

/* -------- Steuertipps --------- */

/* -------- FlexBlog ------------- */

.flexcard {
  background: var(--c-surface);
  margin: 10px 20px;
  box-shadow: var(--shadow-1);
  padding-bottom: 5px;
  min-height: 300px;
}

.flexcard a {
  color: var(--c-ink);
  text-decoration: none;
}

/* ".flexcard-content h2 { margin: 0; padding: 0 }" stand hier, hat aber nie
   gegriffen: (0,1,1) unterlag "#content h2" (1,0,1). Nach dem Absenken der
   ID-Spezifitaet wuerde die Regel erstmals wirken und die Ueberschriften der
   Startseiten-Kacheln ihre Abstaende verlieren. Entfernt, damit dieser
   Schritt die Darstellung nicht veraendert - die Kacheln werden in Schritt 13
   ohnehin neu gebaut.                                                      */

.flexcard-content p {
  font-size: var(--fs-sm);
}

/* Flexbox stuff */

@media (min-width: 30rem) {
  .flexcards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .flexcard {
    flex: 0 1 calc(45% - 1em);
  }
}

@media (min-width: 48rem) {
  .flexcard {
    flex: 0 1 calc(30% - 1em);
  }
}

/* -------- FlexBlog ------------- */

/* -------- Infobox Flexbox ------------- */
.info-flex-container {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 20px;
  border: 3px solid var(--c-ink);
  border-radius: var(--radius-lg);
}

.info-flex-item-left {
  padding: 10px;
  flex: 80%;
}

.info-flex-item-right {
  padding: 10px;
  flex: 80%;
}

.info-image {
  height: 250px;
  width: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

ul.infobox-list {
  list-style-image: url("../bilder/greencheck.jpg");
  vertical-align: middle;
  line-height: 160%;
}

@media (min-width: 48rem) {
  .info-flex-item-left {
    flex: 35%;
  }

  .info-flex-item-right {
    flex: 65%;
  }

  .info-flex-container {
    margin: 10px 50px;
  }
}

/* -------- Infobox Flexbox ------------- */

/* ------------------------- Prose -----------------------------------------

   Die Inhaltstypografie der Site. Sie war waehrend der Umstellung per
   class="prose" pro Seite zuschaltbar; seit Schritt 14 tragen alle 57
   Seiten die Klasse und das Altsystem ist geloescht. Die Klasse bleibt als
   Schalter stehen - sie grenzt den Fliesstext gegen Kartenspalte und
   Footer ab, die bewusst anderen Regeln folgen.

   Zwei Dinge tragen hier die eigentliche Wirkung:

   1. Lesebreite. Der Fliesstext lief bisher ueber die volle 75-Prozent-
      Spalte, also gut 900px - deutlich mehr als die 60 bis 80 Zeichen, ab
      denen das Auge den Anfang der naechsten Zeile noch sicher findet. Das
      Grid stellt eine mittlere Spalte von hoechstens 68ch her.

      Die aeusseren Spuren sind minmax(gutter, 1fr): auf dem Desktop
      zentrieren sie den Text, auf dem Handy schrumpfen sie auf den
      Seitenrand zusammen. Elemente, die Breite brauchen - Tabellen -
      spannen ueber alle drei Spuren. Das ersetzt die sonst uebliche
      Loesung mit negativen Margins.

      Die mittlere Spur zieht die beiden Gutter selbst ab. Stuende dort
      nur "min(--lesebreite, 100%)", waere sie auf dem Handy - wo 90ch
      breiter sind als der Bildschirm - genau 100% breit, und die beiden
      Aussenspuren kaemen mit ihrem Mindestmass obendrauf. Das Gitter lief
      damit um zwei Gutter ueber den rechten Rand hinaus. Am Desktop faellt
      es nicht auf, weil 90ch dort kleiner sind als der Container.

   2. Rhythmus. ".prose > * + *" gibt jedem Element ausser dem ersten
      denselben Abstand nach oben. Diese eine Regel ersetzt die 30
      verstreuten margin-Werte des Bestands.                            */

.prose {
  display: grid;
  grid-template-columns:
    minmax(var(--gutter), 1fr)
    min(var(--lesebreite), 100% - 2 * var(--gutter))
    minmax(var(--gutter), 1fr);
  line-height: var(--lh-body);
}

/* margin: 0 raeumt die Einzelabstaende der Altregeln weg, damit allein der
   Rhythmus unten zaehlt.

   min-width: 0 hebt die Vorgabe min-width: auto fuer Grid-Kinder auf. Ohne
   das kann ein Kind nicht unter seine Inhaltsbreite schrumpfen - eine breite
   Tabelle sprengt dann die Spalte, statt im eigenen Container zu scrollen.
   Genau das war die Ursache dafuer, dass Tabellen mobil ueber den Rand
   liefen, obwohl der Wrapper schon overflow: auto trug.                  */
.prose > * {
  grid-column: 2;
  margin: 0;
  min-width: 0;
}

.prose > * + * {
  margin-block-start: var(--space-4);
}

/* Die Regel darueber erreicht nur direkte Kinder - anders geht es im Grid
   nicht. In Containern gibt es kein Grid; dort stellt dieselbe Eulenregel
   den Abstand her. Das betrifft 219 Absaetze, 49 h3, 27 h2 und 23 Listen,
   die ihren Abstand bisher aus ":where(#content) p { margin: 10px 20px }"
   bezogen haben.

   Die 20px Seitenrand der Altregel entfallen dabei bewusst: den Rand
   liefert inzwischen der Container selbst - .tipps, .tippsContainer und
   .info-flex-item-* haben eigenes padding. Doppelt gab es ihn nur aus
   Gewohnheit.

   Die rechte Seite nennt die Elemente einzeln statt "*". Das ist der
   Unterschied zwischen "Textfluss" und "alles, was ein Geschwister hat":
   im Browser-Mockup auf der Startseite liegen drei <span class="bar"> als
   Hamburger und drei .browserdot als Fensterknoepfe nebeneinander. Mit "*"
   bekamen die je 1rem Abstand nach oben und wurden auseinandergezogen. */
.prose
  :where(div, details, li, figure)
  > *
  + :where(p, ul, ol, h2, h3, details, blockquote, .table-wrapper) {
  margin-block-start: var(--space-4);
}

/* Uebersichtsseiten sind Listen, kein Fliesstext: eine Lesespalte von 90ch
   bringt dort nichts, sie laesst nur Platz ungenutzt.

   Geaendert wird deshalb nur die Breite der Mittelspur, nicht die Spalte,
   in der die Kinder liegen. Der erste Ansatz war "grid-column: 1 / -1" -
   damit spannten sie ueber alle drei Spuren, und die Gutter waren keine
   Raender mehr, sondern Flaeche, die das Kind selbst belegt. Auf dem Handy
   stand der Text dadurch bis an die Bildschirmkante. So bleiben die Raender
   Raender, und die Mittelspur nimmt sich den ganzen Rest. */
.prose--voll {
  grid-template-columns: var(--gutter) 1fr var(--gutter);
}

/* Tabellen standen zunaechst als Ausbrecher ueber die volle Breite. Sie
   laufen jetzt in derselben Spalte wie der Text, damit die Kante darunter
   nicht springt - die margin-Regel des Bestands muss dafuer weg. */
.prose > .table-wrapper {
  margin-inline: 0;
}

/* Diese Elemente zentrieren sich ueber "margin: ... auto" und sind
   schmaler als die Spalte. Das "margin: 0" aus ".prose > *" raeumt das
   auto weg, sie stuenden sonst linksbuendig. */
.prose > .centerimage,
.prose > .responsiveBlog,
.prose > .bsp3video,
.prose > .container,
.prose > hr {
  margin-inline: auto;
}

/* Die Trennlinie auf steuerfragen.html. Sie ist kein Rest der Altregeln,
   sondern deren einziger sichtbarer Inhalt: nach dem Reset hat <hr> keinen
   Rahmen mehr, ohne diese Regel bliebe ein unsichtbares Element stehen.
   Waren 50px Abstand nach oben, jetzt der Token daneben. */
.prose hr {
  width: 70%;
  margin-block-start: var(--space-7);
  border: none;
  border-top: 2px solid var(--c-line);
}

.prose h1 {
  font-size: var(--fs-h1);
  font-weight: bold;
  line-height: var(--lh-heading);
  padding: 0;
  text-align: center;
}

.prose h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  font-weight: bold;
  padding: 0;
  margin-block-start: var(--space-7);
}

.prose h3 {
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
  font-weight: bold;
  padding: 0;
  margin-block-start: var(--space-6);
}

/* Links tragen die Schriftfarbe des Textes und heben sich allein durch die
   Fettung ab - keine Unterstreichung, keine Sonderfarbe. Das ist gegenueber
   WCAG 1.4.1 unbedenklich, weil der Unterschied nicht auf Farbe beruht.
   Beim Hovern kommt die Unterstreichung dazu, damit anklickbar bleibt,
   was anklickbar ist. */
.prose a {
  color: inherit;
  font-weight: bold;
  text-decoration: none;
}

.prose a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Auf steuertipps.html umschliesst jeder Link eine ganze Karte. Die
   Fettung fuer Textlinks wuerde dort den kompletten Karteninhalt treffen -
   Ueberschrift, Text und alles dazwischen. */
.prose .blogcontainer a,
.prose .blogcontainer a:hover {
  font-weight: normal;
  text-decoration: none;
}

/* Der Reset setzt list-style: none, und keine Regel stellt es wieder her -
   die Aufzaehlungen der Site haben deshalb bislang gar keine Punkte. */
.prose ul {
  list-style: disc;
  padding-inline-start: var(--space-5);
}

.prose ol {
  list-style: decimal;
  padding-inline-start: var(--space-5);
}

.prose li + li {
  margin-block-start: var(--space-2);
}

/* ------------------------- Prose Ende ------------------------------------ */

/* ------------------------- Komponenten nach .prose -----------------------

   Was hier unten steht, muss hier unten stehen. ".card h3" und ".prose h3"
   liegen beide bei Spezifitaet (0,1,1) - bei Gleichstand entscheidet die
   Reihenfolge im Blatt. Stuenden die Kartenregeln oben bei .card, naehme
   ".prose h3" den Karten auf steuertipps.html das padding wieder weg.

   Karten kommen an zwei Orten vor: in der Spalte unter dem Artikel und in
   den Themengruppen auf steuertipps.html. Ein Regelsatz deckt beide ab;
   bisher waren es zwei, die nur zufaellig aehnlich aussahen.

   Die Karte selbst bekommt kein padding - das Bild laeuft randlos ueber
   ihre volle Breite. Den Innenabstand tragen deshalb Ueberschrift und
   Text.                                                                  */

.card h3 {
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  font-size: var(--fs-lg);
  font-weight: bold;
  line-height: var(--lh-heading);
}

.card p {
  margin: 0;
  padding: var(--space-4) var(--space-5) var(--space-5);
  line-height: var(--lh-body);
}