/* aeverno.de · Inhalte der Unterseiten (FS192, 11-10-2026). Die Hülle (Schrift, Farben, Knöpfe, Kopf, Fuß) steht in
   huelle.css und wird davor geladen.
   1 Textseiten (Rechtstexte, Kontakt, Danke, Fehler) · 2 Kontaktformular · 3 Aeverno-Startseite · 4 Funktionen · 5 Seite 404 */

/* ============ 1 Textseiten ============
   Der Text der Rechtsseiten wird nicht angefasst (Klasse R). Er bleibt ohne eigene Klassen; das Aussehen greift nur über
   die Hülle (.lese__text …) auf seine schlichten Elemente zu: h1, h2, p, ul, a, .lead, .label, .meta, Formularfelder. */
.lese { padding: 176px 0 104px; }
.lese__spalte { width: 100%; max-width: calc(720px + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.lese__text { --feldrand: #808AA0; color: var(--tinte-2); font-size: 17px; line-height: 1.7; overflow-wrap: break-word; }
.lese__text h1 { color: var(--tinte); font-weight: 600; font-size: clamp(2.1rem, 4.2vw, 3.1rem); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.lese__text h2 { margin-top: 46px; color: var(--tinte); font-weight: 600; font-size: 23px; line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
.lese__text h3 { margin-top: 30px; color: var(--tinte); font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: -.015em; }
.lese__text p { margin-top: 14px; }
.lese__text h2 + p, .lese__text h3 + p { margin-top: 12px; }
.lese__text .lead { margin-top: 16px; color: var(--neben); }
.lese__text .label { margin-top: 24px; color: var(--tinte); font-weight: 600; }
.lese__text .label + p { margin-top: 4px; }
.lese__text strong, .lese__text b { color: var(--tinte); font-weight: 600; }
.lese__text ul, .lese__text ol { margin-top: 12px; padding-left: 24px; }
.lese__text ul { list-style: disc; }
.lese__text ol { list-style: decimal; }
.lese__text li { margin-top: 8px; padding-left: 4px; }
.lese__text li::marker { color: var(--akzent); }
.lese__text a, .lese__wege a {
  color: var(--akzent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  overflow-wrap: anywhere; -webkit-hyphens: none; hyphens: none;
}
.lese__text a:hover, .lese__wege a:hover { text-decoration-thickness: 2px; }
.lese__text table { display: block; width: 100%; margin-top: 18px; overflow-x: auto; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.lese__text th, .lese__text td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.lese__text th { color: var(--tinte); font-weight: 600; }
.lese__text .meta { margin-top: 46px; padding-top: 18px; border-top: 1px solid var(--linie); color: var(--neben); font-size: 14px; line-height: 1.65; }
.lese__text .meta + .meta { margin-top: 10px; padding-top: 0; border-top: 0; }
.lese__text .meta a { color: inherit; }
.lese__wege { margin-top: 14px; color: var(--neben); font-size: 17px; line-height: 1.7; }

/* ============ 2 Kontaktformular: Felder, Namen und Ziel stehen unverändert im Text; hier nur das Aussehen ============ */
.lese__text form { max-width: 620px; margin-top: 30px; }
.lese__text label { display: block; margin: 22px 0 8px; color: var(--tinte); font-weight: 600; font-size: 15px; line-height: 1.5; }
.lese__text label span { color: var(--neben); font-weight: 400; }
.lese__text input, .lese__text textarea {
  display: block; width: 100%; margin: 0; padding: 13px 16px; border: 1px solid var(--feldrand); border-radius: 16px;
  background: var(--flaeche); color: var(--tinte); font: inherit; -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lese__text textarea { min-height: 190px; resize: vertical; }
.lese__text input:hover, .lese__text textarea:hover { border-color: var(--neben); }
.lese__text input:focus-visible, .lese__text textarea:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-color: var(--akzent); border-radius: 16px; }
.lese__text form button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; margin-top: 26px; padding: 14px 28px;
  border-radius: 999px; border: 1.5px solid #1A2439; color: #FFFDF9; font-weight: 600; font-size: 16px; line-height: 26.4px; letter-spacing: .004em;
  background: linear-gradient(180deg, #152036 0%, #0B1220 52%, #070C17 100%);
  box-shadow: inset 0 1px 0 rgba(205, 223, 253, .13), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 1px 1px rgba(11, 18, 32, .28), 0 12px 26px -16px rgba(11, 18, 32, .8);
  transition: transform .2s ease, box-shadow .35s ease;
}
.lese__text form button:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(205, 223, 253, .2), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 0 0 1px rgba(129, 171, 243, .16), 0 14px 30px -16px rgba(46, 90, 168, .85); }
.lese__text form button:focus-visible { border-radius: 999px; }
/* Fallenfeld gegen Spam: für Menschen nicht sichtbar */
.lese__text .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.lese__text .hinweis { margin-top: 24px; color: var(--neben); font-size: 15px; }

/* ============ 3 Aeverno-Startseite: Zeichen, ein Satz, die App, Kontakt ============ */
.start { display: flex; flex-direction: column; justify-content: center; padding: 190px 0 110px; }
.start__kopf { display: flex; flex-direction: column; align-items: center; text-align: center; }
.start__zeichen { width: 76px; height: 76px; border-radius: 23%; box-shadow: 0 10px 30px rgba(26, 46, 92, .13); }
.start__satz { margin-top: 34px; font-size: clamp(2.2rem, 4.1vw, 3.7rem); }
.start__spalte { width: 100%; max-width: calc(800px + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.appzeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 24px;
  margin-top: 76px; padding-block: 30px; border-block: 1px solid var(--linie);
}
.appzeile__bild { width: 72px; height: 72px; border-radius: 23%; box-shadow: 0 10px 22px -10px rgba(11, 18, 32, .45); }
.appzeile__satz { display: block; max-width: 440px; color: var(--tinte-2); font-size: 18px; line-height: 1.6; }
.appzeile__satz strong { color: var(--tinte); font-weight: 650; letter-spacing: -.03em; }
.appzeile:hover .knopf { transform: translateY(-2px); }
.appzeile:focus-visible { outline-offset: 8px; border-radius: 12px; }
.start__kontakt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: 30px; color: var(--neben); font-size: 16px; line-height: 1.65; }
.start__kontakt a:not(.verweis) { color: var(--tinte-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.start__kontakt a:not(.verweis):hover { color: var(--akzent); }

/* ============ 4 Funktionen ============ */
.seitenkopf { padding: 208px 0 34px; }
.h1--seite { font-size: clamp(2.5rem, 4.9vw, 4.4rem); }
.seitenkopf__satz { margin-top: 28px; max-width: 660px; color: var(--neben); font-size: 19px; line-height: 1.65; }

/* Geräterahmen Graphit wie auf der App-Seite; Breite --b, alles andere rechnet sich daraus */
.geraet {
  --b: 250px;
  position: relative; flex: none; width: var(--b); padding: calc(var(--b) * .024); border-radius: calc(var(--b) * .15);
  background: linear-gradient(140deg, #5B5650 0%, #1C1A18 36%, #34302C 66%, #6B655E 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 3px rgba(40, 24, 8, .26), 0 22px 36px -18px rgba(40, 24, 8, .38), 0 54px 90px -44px rgba(40, 24, 8, .36);
}
.geraet__schirm {
  position: relative; overflow: hidden; aspect-ratio: 1064 / 2200;
  border: calc(var(--b) * .011) solid #141413; border-radius: calc(var(--b) * .128); background: #0B101B;
}
.geraet__schirm img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }

.thema { padding-block: 46px; }
.thema__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; align-items: center; }
.thema .h2 { font-size: clamp(2rem, 3.35vw, 3rem); }
.thema .absatz { max-width: 480px; margin-top: 22px; }
.thema__bild { container-type: inline-size; display: flex; justify-content: center; align-items: flex-end; gap: 24px; }
.thema__bild .geraet { --b: min(250px, 47cqw); }
.thema__bild .geraet--hinten { --b: min(212px, 40cqw); }
.thema--links .thema__bild { order: -1; }

.inhalte { margin-top: 54px; padding-block: 96px; background: var(--grund-2); }
.inhalte__raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 72px; align-items: start; }
.inhalte .absatz { max-width: 380px; }
.bereiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 44px; border-top: 1px solid var(--linie); }
.bereiche li {
  display: flex; align-items: center; gap: 14px; min-height: 68px; padding-block: 14px; border-bottom: 1px solid var(--linie);
  color: var(--tinte); font-weight: 500; font-size: 17px; line-height: 1.3; letter-spacing: -.012em; -webkit-hyphens: auto; hyphens: auto;
}
/* je Zeile ein schmaler Strich in der Farbe des Bereichs aus der App, daneben die Nummer des Handlungsbereichs */
.bereiche li::before { content: ""; flex: none; align-self: stretch; width: 4px; margin-block: 5px; border-radius: 2px; background: var(--ton, var(--akzent)); }
.bereiche li:nth-child(1) { --ton: #9A7B2C; }
.bereiche li:nth-child(2) { --ton: #2E6B70; }
.bereiche li:nth-child(3) { --ton: #7E4F72; }
.bereiche li:nth-child(4) { --ton: #7D5A3C; }
.bereiche li:nth-child(5) { --ton: #3D6B85; }
.bereiche li:nth-child(6) { --ton: #6E7548; }
.ziffer { flex: none; width: 14px; color: var(--ton, var(--akzent)); font-weight: 600; font-size: 15px; line-height: 1; font-variant-numeric: tabular-nums; }
.inhalte__text { margin-top: 28px; max-width: 640px; color: var(--tinte-2); font-size: 16px; line-height: 1.7; }
.stand { margin-top: 14px; max-width: 640px; color: var(--neben); font-size: 14px; line-height: 1.65; }

.fragen { padding-block: 100px; }
.fragen__raster { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); column-gap: 90px; align-items: start; }
.fragen__kopf p { color: var(--neben); font-size: 17px; line-height: 1.65; max-width: 300px; margin-top: 20px; }
.fragen__kopf .verweis { margin-top: 28px; }
.fragen__liste { border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 21px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: -.02em;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary h3 { margin: 0; font: inherit; letter-spacing: inherit; }
.frage summary svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--neben); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.frage summary:hover h3 { color: var(--akzent); }
.frage[open] summary svg { transform: rotate(180deg); }
.frage__antwort { padding: 2px 40px 24px 0; color: var(--tinte-2); font-size: 16px; line-height: 1.7; }
.frage__antwort a { color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; }

.abschluss { padding-block: 100px 108px; text-align: center; background: var(--grund-2); }
.abschluss__innen { display: flex; flex-direction: column; align-items: center; }
.zeichen { width: 72px; height: 72px; border-radius: 23%; box-shadow: 0 10px 30px rgba(26, 46, 92, .13); }
.abschluss .h2 { margin-top: 28px; }
.abschluss__satz { margin-top: 22px; color: var(--neben); font-size: 19px; line-height: 1.65; }
.abschluss .abzeichen { margin-top: 30px; }

/* ============ 5 Seite 404 ============ */
.leer { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 200px var(--rand) 120px; text-align: center; }
.leer__satz { margin-top: 22px; color: var(--neben); font-size: 19px; line-height: 1.65; }
.leer__wege { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }

/* ============ ab 1100 abwärts ============ */
@media (max-width: 1100px) {
  .thema__raster, .inhalte__raster { column-gap: 48px; }
  .fragen__raster { column-gap: 56px; }
}
@media (min-width: 701px) and (max-width: 960px) {
  .inhalte__raster { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
}

/* ============ ab 700 abwärts: einspaltig ============ */
@media (max-width: 700px) {
  .lese { padding: 124px 0 64px; }
  .lese__text { font-size: 16px; -webkit-hyphens: auto; hyphens: auto; }
  .lese__text h1 { font-size: 2rem; }
  .lese__text h2 { margin-top: 38px; font-size: 21px; }
  .lese__text h3 { font-size: 18px; }
  .lese__text form button { width: 100%; }
  .lese__wege { font-size: 16px; }

  .start { padding: 132px 0 70px; }
  .start__zeichen { width: 64px; height: 64px; }
  .start__satz { margin-top: 26px; font-size: clamp(1.9rem, 9.4vw, 2.5rem); line-height: 1.1; }
  .appzeile { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 22px; align-items: start; margin-top: 52px; padding-block: 26px; }
  .appzeile__bild { width: 56px; height: 56px; }
  .appzeile__satz { font-size: 16.5px; }
  .appzeile .knopf { grid-column: 1 / -1; width: 100%; }
  .start__kontakt { margin-top: 24px; }

  .seitenkopf { padding: 136px 0 18px; }
  .h1--seite { font-size: clamp(2.2rem, 10.6vw, 3rem); }
  .seitenkopf__satz { margin-top: 20px; font-size: 17px; }
  .thema { padding-block: 34px; }
  .thema__raster { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .thema--links .thema__bild { order: 0; }
  .thema .h2 { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .thema .absatz { margin-top: 16px; font-size: 17px; }
  .thema__bild { gap: 16px; }
  .thema__bild .geraet { --b: min(236px, 47cqw); }
  .thema__bild .geraet:only-child { --b: min(236px, 70cqw); }
  .inhalte { margin-top: 34px; padding-block: 64px; }
  .inhalte__raster { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .bereiche { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .bereiche li { min-height: 0; }
  .fragen { padding-block: 64px; }
  .fragen__raster { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .frage__antwort { padding-right: 0; }
  .abschluss { padding-block: 70px 78px; }
  .leer { padding: 150px var(--rand) 80px; }
  .leer__wege { flex-direction: column; align-self: stretch; }
}

/* ============ sehr schmale Telefone (unter 360): „Handlungsbereiche.“ passt sonst nicht in die Zeile ============ */
@media (max-width: 359px) {
  .h2 { font-size: 2.05rem; }
  .h1--seite { font-size: 2.1rem; }
  .start__satz { font-size: 1.8rem; }
}