/* ARAVIE - die Schicht ueber dem Design.
 *
 * Die Seiten kommen aus Claude Design als Artboards: jedes Element traegt
 * seine Werte als style="" direkt am Tag. Das ist fuer den Entwurf richtig -
 * jeder Wert steht dort, wo er gilt - taugt aber nicht fuer eine Website:
 * Artboards sind 1280 Pixel breit und kennen kein Handy, und ein
 * style-hover="" versteht kein Browser.
 *
 * Diese Datei ergaenzt genau das und ruehrt die Entwurfswerte nicht an:
 *
 *   1. Grundlagen (Kasten, Schrift, Sichtbarkeit der Tastaturbedienung)
 *   2. Bausteine, die der Entwurf nicht hat: Burgermenue, Aufklappfragen,
 *      Formular
 *   3. Die Schmalansicht - als !important, weil Inline-Werte sonst gewinnen
 *
 * Die Schmalansicht greift die Entwurfswerte ueber [style*="..."] ab. Das
 * sieht ungewohnt aus, ist aber der einzige Weg, der die Pixeltreue der
 * Vorlage unangetastet laesst: Wer die Inline-Werte in Klassen umschreibt,
 * baut das Design nach - und weicht beim naechsten Entwurf davon ab.
 *
 * Am Ende dieser Datei haengt bauen.pl die Hover-Regeln an, die es aus den
 * style-hover-Angaben gewonnen hat.
 */

/* ------------------------------------------------------------ 1. Grundlagen */

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

body {
  margin: 0;
  background: #FFFFFF;
  color: #142437;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; }
p, li, td { overflow-wrap: break-word; }
a { color: #0054A6; text-decoration: none; }
a:hover { color: #0B2E59; }

/* Tastaturbedienung muss man sehen. Der Entwurf zeigt nur Mauszustaende;
 * ohne diese Regel springt der Fokus unsichtbar durch die Seite. */
:focus-visible { outline: 2px solid #0054A6; outline-offset: 3px; border-radius: 4px; }

/* Sprungmarke fuer Tastatur und Screenreader - sichtbar erst bei Fokus. */
.ar-sprung {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #0B2E59; color: #FFFFFF; padding: 12px 20px;
  border-radius: 0 0 12px 0; font-weight: 600;
}
.ar-sprung:focus { left: 0; color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }
/* Der Kopf klebt oben - Sprungziele muessen darunter anfangen. */
:target { scroll-margin-top: 96px; }

/* --------------------------------------------------------- 2. Neue Bausteine */

/* Burgermenue. Auf dem Schreibtisch nicht vorhanden, nicht nur versteckt. */
.ar-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: #FFFFFF; border: 1px solid #E3EAF1; border-radius: 12px;
  cursor: pointer; color: #0B2E59;
}
.ar-burger:hover { background: #EEF6FC; }
.ar-burger span {
  display: block; width: 20px; height: 2px; background: #0B2E59;
  border-radius: 2px; position: relative;
}
.ar-burger span::before, .ar-burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: #0B2E59; border-radius: 2px;
}
.ar-burger span::before { top: -6px; }
.ar-burger span::after  { top: 6px; }

.ar-menue {
  display: none;
  position: fixed; inset: 76px 0 0 0; z-index: 45;
  background: #FFFFFF; padding: 28px 20px 40px;
  overflow-y: auto;
}
.ar-menue[data-offen="ja"] { display: block; }
.ar-menue ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ar-menue a {
  display: block; padding: 14px 4px; font-size: 19px; font-weight: 600; color: #142437;
  border-bottom: 1px solid #EEF3F8;
}
.ar-menue a:hover { color: #0054A6; }
.ar-menue .ar-menue-knopf {
  margin-top: 22px; display: flex; align-items: center; justify-content: center;
  height: 54px; background: #0054A6; color: #FFFFFF; border: 0; border-radius: 12px;
  font-size: 16.5px; font-weight: 600;
}
.ar-menue .ar-menue-knopf:hover { background: #0B2E59; color: #FFFFFF; }
body[data-menue="offen"] { overflow: hidden; }

/* Der Anmeldeknopf. Gruen, weil er die Gegenrichtung zum blauen Hauptknopf
 * ist: Blau fuehrt neue Interessenten zur Anfrage, Gruen fuehrt bestehende
 * Partner in ihren Zugang. #007A5F statt des Markengruens #00A982, weil
 * weisse Schrift darauf sonst nur 3,0 zu 1 erreicht - siehe
 * werkzeug/pruefe-kontrast.pl. */
/* Form und Farbe stehen am Element (siehe bauen.pl), damit die
 * Kontraktpruefung sie sieht. Hier steht nur, was ein style=""-Attribut
 * nicht kann: der Zustand beim Ueberfahren. */
.ar-login:hover { background: #006B50 !important; color: #FFFFFF; }
/* Im Burgermenue steht der Anmeldeknopf unter dem blauen. */
.ar-menue .ar-menue-login { background: #007A5F; margin-top: 10px; }
.ar-menue .ar-menue-login:hover { background: #006B50; }

/* Aufklappfragen. Im Entwurf ist der Kopf ein anklickbares div; hier ist es
 * ein Knopf - sonst erreicht ihn die Tastatur nicht und kein Screenreader
 * sagt, dass sich etwas auf- und zuklappt. */
.ar-faq-kopf { font: inherit; }
.ar-faq-zeichen { transition: transform 150ms ease; }

/* Formular. Der Entwurf zeigt Felder ohne Verhalten - Rahmen bei Fokus,
 * Fehlerfarbe und der Zustand der drei Interessenknoepfe kommen von hier. */
.ar-feld:focus { outline: 2px solid #0054A6; outline-offset: 0; border-color: #0054A6; }
.ar-interesse[aria-pressed="true"] { border-color: #0054A6 !important; background: #EEF6FC !important; color: #0054A6 !important; }
.ar-interesse[aria-pressed="false"]:hover { background: #F7F9FB; }
.ar-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ar-hinweis { border-radius: 12px; padding: 14px 18px; font-size: 15px; line-height: 1.55; }
.ar-hinweis-gut { background: #ECF9F5; color: #00886A; border: 1px solid #B7E6D8; }
.ar-hinweis-schlecht { background: #FDF0F0; color: #A33333; border: 1px solid #F1CFCF; }

/* Karten heben sich beim Ueberfahren - im Entwurf als style-hover notiert,
 * die Bewegung selbst gehoert hierher. */
[style*="border-radius:18px"], [style*="border-radius:20px"], [style*="border-radius:14px"] {
  transition: transform 150ms ease, box-shadow 150ms ease;
}

/* ------------------------------------------------------- 3. Die Schmalansicht */

/* Ab hier verliert das zweispaltige Raster seinen Sinn: Ein Browserbild
 * neben einer Textspalte wird auf 500 Pixel unleserlich. */
@media (max-width: 1080px) {
  header nav { display: none !important; }
  .ar-burger { display: inline-flex; }

  [style*="grid-template-columns:1fr 1fr;"],
  [style*="grid-template-columns:1.1fr 1fr;"],
  [style*="grid-template-columns:1.2fr 1fr;"],
  [style*="grid-template-columns:1.4fr 1fr;"],
  [style*="grid-template-columns:2fr 1fr;"],
  [style*="grid-template-columns:2fr 1.1fr;"],
  [style*="grid-template-columns:1fr 1.2fr;"],
  [style*="grid-template-columns:1fr 1.15fr;"] { grid-template-columns: minmax(0,1fr) !important; }

  [style*="grid-template-columns:repeat(4,1fr);"],
  [style*="grid-template-columns:repeat(3,1fr);"],
  [style*="grid-template-columns:2fr 1fr 1fr;"],
  [style*="grid-template-columns:2.4fr 1fr 1fr;"],
  [style*="grid-template-columns:2fr 1fr 1fr 1fr 1fr;"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* Die mitlaufende Spalte der SEO-Seite hat neben einer Spalte nichts mehr,
   * woran sie entlanglaufen koennte. */
  [style*="position:sticky; top:110px"] { position: static !important; }
}

@media (max-width: 760px) {
  [style*="grid-template-columns"] { grid-template-columns: minmax(0,1fr) !important; }

  section > div { padding-top: 62px !important; padding-bottom: 62px !important; }
  section > div, header > div, footer > div { padding-left: 20px !important; padding-right: 20px !important; }

  h1 { font-size: 34px !important; line-height: 1.12 !important; }
  h2 { font-size: 27px !important; line-height: 1.2 !important; }

  /* Knoepfe ueber die volle Breite - nebeneinander bleiben zwei Knoepfe
   * unter 380 Pixeln nicht mehr lesbar. */
  .ar-knopf { width: 100%; justify-content: center; }
  .ar-knopfreihe { flex-direction: column !important; align-items: stretch !important; }

  /* Ueberschrift links, Knopf rechts: schmal steht der Knopf sonst 120 Pixel
   * ueber dem rechten Rand, weil er ueber die volle Breite geht. */
  [style*="justify-content:space-between"] { flex-wrap: wrap; }

  /* Die drei Heldenbilder sind Stapel aus schwebenden Karten: ein
   * Browserbild, darueber und darunter kleine Karten an festen Punkten.
   * Auf 375 Pixeln liegen sie uebereinander und ragen in die naechste
   * Sektion. Schmal loesen wir den Stapel auf - erst das Browserbild, dann
   * die Karten darunter. Der Farbschimmer im Hintergrund faellt weg, er
   * traegt ohne die Ueberlagerung nichts mehr bei. */
  [style*="position:relative; height:520px"],
  [style*="position:relative; height:400px"] { height: auto !important; }

  [style*="position:relative; height:520px"] > [style*="position:absolute"],
  [style*="position:relative; height:400px"] > [style*="position:absolute"] {
    position: static !important; margin-top: 14px; max-width: 100%;
  }

  [style*="position:relative; height:520px"] > [style*="inset:0"],
  [style*="position:relative; height:400px"] > [style*="inset:0"] { display: none !important; }

  /* Was im Entwurf nebeneinander schwebte, steht jetzt untereinander. */
  [style*="display:flex"][style*="gap:64px"],
  [style*="display:flex"][style*="gap:56px"],
  [style*="display:flex"][style*="gap:48px"] { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  h1 { font-size: 30px !important; }
}

/* --------------------------------------------- Hover-Regeln aus dem Entwurf */

/* Der Einwilligungsbanner auf schmalen Geraeten.
 *
 * Ohne diese Regel nimmt er auf einem Telefon ueber die Haelfte des
 * Bildschirms ein: Die Knoepfe stellen sich untereinander und der Text
 * bleibt in voller Laenge. Der Besucher sieht dann mehr Hinweis als Seite.
 *
 * Deshalb schmal: Knoepfe nebeneinander, jeder halb so breit, Schrift und
 * Abstaende kleiner. Und eine Hoehenbegrenzung, damit der Banner nie mehr
 * als ein Drittel des Bildschirms bekommt - lieber scrollt der Text in
 * sich, als dass er die Seite verdeckt.
 */
@media (max-width: 700px) {
  #ar-einwilligung { padding: 14px 16px !important; max-height: 34vh; overflow-y: auto; }
  #ar-einwilligung > div { gap: 12px !important; }
  #ar-einwilligung p[id$="titel"] { font-size: 15.5px !important; }
  #ar-einwilligung p[id$="text"]  { font-size: 13.5px !important; line-height: 1.5 !important; }
  #ar-einwilligung > div > div:last-child { width: 100%; }
  #ar-einwilligung > div > div:last-child > * { flex: 1 1 0; padding: 0 12px !important; }
}

.hv1:hover { color:#0054A6 }
.hv2:hover { background:#0B2E59; color:#FFFFFF }
.hv3:hover { background:#EEF6FC }
.hv4:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(11,46,89,0.10) }
.hv5:hover { color:#FFFFFF }
.hv6:hover { background:#007A5F; color:#FFFFFF }
.hv7:hover { background:#F7F9FB }
.hv8:hover { background:rgba(255,255,255,0.08); color:#FFFFFF }
.hv9:hover { background:#0B2E59 }