/* ==========================================================================
   reikotec. — Landingpage E-Rechnung
   ERGÄNZUNG zu assets/css/style.css. Enthält nur Bausteine, die es auf der
   Site noch nicht gibt. Alles andere kommt aus der Hauptvorlage:
   .blue-gradient · .white-card · .bg-blue · .bg-lightgrey · .tel · .reikoform
   .service / .service-parent · .leistungen · .margin-big · .permanent-marker
   ========================================================================== */

:root{
  --blau:      #0093dd;   /* Hausfarbe */
  --blau-tief: #007bbd;   /* Hover */
  --tuerkis:   #2dc2ab;   /* Bestätigung */
  --grau-card: rgba(0,0,0,.2);
}

:focus-visible{ outline:3px solid var(--blau); outline-offset:2px; }
.blue-gradient :focus-visible{ outline-color:#fff; }

/* Hero-Größen (h1 3rem, mobil 2rem) und die Zentrierung über .text-center
   liefert style.css bzw. Bootstrap bereits – hier steht bewusst nichts. */

/* ------------------------------------------------------------- Buttons --
   .bn13 und .button-container stammen 1:1 aus dem Startseiten-Template.
   Sie standen dort als <style> im Inhalt; hier liegen sie in einer Datei.
   → Gehören auf Dauer nach style.css, weil sie zwei Seiten bedienen.       */

.button-container{
  display:flex; justify-content:center; align-items:center;
  margin-top:1.5%;
}

.bn13{
  padding:0.65em 1.6em;
  border:3px solid #ffffff;
  border-radius:0.12em;
  box-sizing:border-box;
  font-weight:300;
  color:#ffffff;
  text-align:center;
  margin:5px 10px;
}
.bn13:hover, .bn13:focus{ background-color:#fff; color:#000; text-decoration:none; }

@media only screen and (max-width:600px){
  .button-container{ flex-direction:column; align-items:center; }
  .bn13{ width:100%; }
}

/* Blauer Button für Formular und Teaser */
.btn-reiko{
  padding:10px 20px;
  border-radius:6px;
  background-color:var(--blau);
  border:2px solid var(--blau);
  color:#fff;
  font-weight:700;
  white-space:normal;
}
.btn-reiko:hover, .btn-reiko:focus{
  background-color:var(--blau-tief); border-color:var(--blau-tief); color:#fff;
}

/* Einleitungstext in den blauen Bändern */
.band-intro{
  max-width:760px; margin:0 auto; padding-bottom:20px;
  color:#fff !important; font-size:18px; font-weight:300;
}

/* ------------------------------------------- Beleg mit Datenansicht ----
   Liegt als weiße Karte im Bogen des Hero – wie die Leistungskacheln
   auf der Startseite.                                                     */

.beleg-card{ padding:0; overflow:hidden; position:relative; }

/* Der Umschalter läuft ohne JavaScript: zwei Radiobuttons steuern per
   :checked, welche Ansicht sichtbar ist. Die Radios liegen als erste
   Kinder in .beleg-card, damit ~ alle folgenden Blöcke erreicht.
   Nebeneffekt: Pfeiltasten schalten von Haus aus um.                      */

.beleg-radio{
  position:absolute; top:0; left:0;
  width:1px; height:1px; margin:0; opacity:0;   /* unsichtbar, aber fokussierbar */
}

/* Ausgangszustand: Papieransicht */
.beleg-card .daten,
.beleg-card .cap-daten{ display:none; }

#beleg-daten:checked ~ .beleg-buehne .beleg,
#beleg-daten:checked ~ .beleg-cap .cap-papier{ display:none; }

#beleg-daten:checked ~ .beleg-buehne .daten{ display:block; }
#beleg-daten:checked ~ .beleg-cap .cap-daten{ display:inline; }

/* Aktiver Reiter */
#beleg-papier:checked ~ .beleg-kopf .beleg-tab[for="beleg-papier"],
#beleg-daten:checked  ~ .beleg-kopf .beleg-tab[for="beleg-daten"]{
  background-color:var(--blau); border-color:var(--blau); color:#fff; font-weight:700;
}

/* Tastaturfokus sichtbar machen – er liegt auf dem versteckten Radio */
#beleg-papier:focus-visible ~ .beleg-kopf .beleg-tab[for="beleg-papier"],
#beleg-daten:focus-visible  ~ .beleg-kopf .beleg-tab[for="beleg-daten"]{
  outline:3px solid var(--blau); outline-offset:2px;
}

.beleg-kopf{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:12px 15px;
  background-color:#eee;
  border-bottom:1px solid #ddd;
}

.beleg-datei{ flex:1 1 180px; color:#555; font-size:14px; }

.beleg-schalter{ display:flex; gap:6px; }

.beleg-tab{
  display:inline-block;
  margin:0;
  user-select:none;
  padding:8px 14px;
  border:2px solid #ddd;
  border-radius:6px;
  background-color:#fff;
  color:#000;
  font-size:14px;
  cursor:pointer;
  transition:all .25s ease;
}
.beleg-tab:hover{ border-color:var(--blau); color:var(--blau); }

.beleg-buehne{ min-height:330px; }

.beleg-cap{
  margin:0; padding:12px 15px;
  background-color:#eee; border-top:1px solid #ddd;
  font-size:14px; color:#555;
}

/* Papieransicht */
.beleg{ padding:25px; animation:belegAuf .3s ease both; }

.beleg-abs{ margin:0; font-size:14px; color:#555; }

.beleg-nr{ margin:0; }
.beleg-nr span{ display:block; font-size:13px; color:#555; }
.beleg-nr big{ color:var(--blau); font-weight:700; font-size:150%; line-height:160%; }

.beleg-emp{ margin:20px 0; }

.beleg-pos{ width:100%; margin-bottom:15px; }
.beleg-pos td{ padding:8px 0; border-bottom:1px solid #eaeaea; }
.beleg-pos td + td{ text-align:right; white-space:nowrap; }

.beleg-sum{ display:flex; justify-content:space-between; align-items:baseline; margin:0 0 10px; }
.beleg-sum span{ font-size:13px; color:#555; }
.beleg-sum big{ color:var(--blau); font-weight:700; font-size:150%; }

.beleg-fuss{ margin:0; font-size:13px; color:#555; }

/* Datenansicht – hell gehalten, damit sie zur übrigen Site passt */
.daten{
  padding:25px;
  background-color:#f5f9fc;
  min-height:330px;
  animation:belegAuf .3s ease both;
}
.daten pre{ margin:0; overflow-x:auto; }
.daten code{
  font-family:Consolas, "Courier New", monospace;
  font-size:13px; line-height:1.9; color:#000; white-space:pre;
}
.daten .t{ color:var(--blau); }

.markiert{ background-color:rgba(0,147,221,.16); border-radius:3px; padding:0 3px; }

@keyframes belegAuf{ from{ opacity:0 } to{ opacity:1 } }

/* ----------------------------------------------------- Zitatkarten -----
   Gesprochene Einwände – dafür ein Anführungszeichen statt eines Icons.   */

.zitat-card{ padding:20px; }

.zitat{
  margin:0 0 15px;
  font-size:18px; font-weight:600; line-height:1.4;
}
/* \201C wie in der blockquote-Regel der Hauptvorlage – das Zeichen sitzt
   oben im Geviert und kollidiert deshalb nicht mit der Zeile darunter. */
.zitat::before{
  content:"\201C";
  display:block; height:32px;
  font-size:56px; line-height:.62;
  color:var(--blau);
}

.zitat-antwort{ margin:0; }

/* ------------------------------------------- Definition und Vergleich --
   Zitierfähiger Absatz für Suchmaschinen und Antwortmaschinen.           */

.definition{
  padding:18px 20px;
  background-color:#f5f9fc;
  border-left:4px solid var(--blau);
  border-radius:0 6px 6px 0;
  font-size:17px;
}

.tabelle-titel{
  margin:0 0 10px;
  font-size:14px; color:#555;
}

.vergleich{ width:100%; }
.vergleich th{
  padding:0 0 8px;
  border-bottom:2px solid var(--blau);
  font-size:13px; font-weight:600; color:#555;
}
.vergleich th:last-child, .vergleich td:last-child{ text-align:right; white-space:nowrap; }
.vergleich td{ padding:12px 0; border-bottom:1px solid #eaeaea; vertical-align:top; }
.vergleich tr:last-child td{ border-bottom:0; }
.vergleich td span{ display:block; font-size:13px; color:#555; }
.vergleich .ja{ color:var(--blau); font-weight:700; }
.vergleich .nein{ color:#555; font-weight:700; }

/* -------------------------------------------- Quellen und Aktualität -- */

.quellen{
  margin-top:40px; padding-top:20px;
  border-top:1px solid #eaeaea;
  font-size:14px; color:#555;
}
.quellen h3{ margin-top:0; font-size:18px; }
.quellen p{ max-width:820px; }
.quellen .stand{ margin-bottom:0; }

/* ------------------------------------------------------ Fristenkarten -- */

.frist{ padding:20px; }

.frist-datum{
  display:inline-block; margin-bottom:12px;
  padding:4px 10px;
  border:1px solid var(--blau); border-radius:6px;
  color:var(--blau); font-weight:700; font-size:14px;
}

.frist h4{ margin-top:0; }

.frist-status{
  margin:15px 0 0; padding-top:12px;
  border-top:1px solid #eaeaea;
  color:var(--blau); font-weight:700; font-size:14px;
}
.frist-status .fas{ margin-right:5px; }

/* Bereits erfüllt: ruhiger. Aktueller Stand: hervorgehoben. */
.frist-erledigt .frist-datum{ border-color:#bbb; color:#555; }
.frist-erledigt .frist-status{ color:#555; font-weight:400; }

.frist-jetzt{ box-shadow:var(--grau-card) 0 2px 12px, 0 0 0 3px var(--blau); }
.frist-jetzt .frist-status{ font-size:19px; font-weight:400; }

.fussnote{
  margin:35px 0 0; padding-top:15px;
  border-top:1px solid #eaeaea;
  font-size:14px; color:#555; max-width:780px;
}

/* --------------------------------------------------------- Software --- */

.bg-lightgrey.margin-big{ padding-top:40px; padding-bottom:40px; margin-top:40px; }

.vorteile{ list-style:none; margin:0; padding:0; }
.vorteile li{ padding:10px 0 10px 28px; border-bottom:1px solid #eaeaea; position:relative; }
.vorteile li:last-child{ border-bottom:0; }
.vorteile li::before{
  content:"\f00c"; font-family:"Font Awesome 5 Free"; font-weight:900;
  position:absolute; left:0; top:10px; color:var(--blau); font-size:14px;
}

/* -------------------------------------------------- Ablauf: Schritte --- */

.schritt{ padding:20px; }

.schritt-nr{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:14px;
  border-radius:50%;
  background-color:var(--blau); color:#fff;
  font-size:20px; font-weight:700; line-height:1;
}

.schritt h4{ margin-top:0; }

/* ----------------------------------------------------------- Formular -- */

.karte-innen{ padding:25px; }
.karte-innen h4:first-child{ margin-top:0; }

.reikoform label{ font-size:13px; color:#555; margin-bottom:0; display:block; }
.reikoform .opt{ color:#999; }

/* style.css gibt sowohl .form-row als auch .form-control eine blaue
   Unterkante – verschachtelt ergäbe das zwei Linien. */
/* .form-row ist in style.css weiß – auf einer weißen Karte verschwindet die
   Feldfläche und es bleiben nur schwebende Linien. Leichter Blauton hilft. */
.reikoform .form-row{
  display:block; min-height:0; padding:8px 12px; margin-bottom:8px;
  background-color:#f5f9fc;
  border-radius:4px 4px 0 0;
  transition:background-color .25s ease;
}
.reikoform .form-row:focus-within{ background-color:#eaf4fb; }
.reikoform .form-row > .form-control{
  border-bottom:0; margin-bottom:0; min-height:0;
  padding:2px 0 0; font-size:17px; font-weight:300;
  background-color:transparent;
}
.reikoform select.form-control{ height:auto; }
.reikoform textarea.form-control{ resize:vertical; }

/* Ort und Telefon nebeneinander – kürzt das Formular um eine Zeile */
.feld-paar{ margin-left:-8px; margin-right:-8px; }
.feld-paar > [class^="col-"]{ padding-left:8px; padding-right:8px; }

/* Pflichtfeld-Stern */
.pflicht{ color:#ce000c; margin-left:3px; }

/* Radiogruppe im Formular. .reikoform label steht auf display:block –
   deshalb braucht die Option dieselbe Spezifität, um inline zu bleiben. */
.radio-gruppe{ display:flex; flex-wrap:wrap; gap:6px 20px; padding-top:6px; }

.reikoform .radio-opt{
  display:inline-flex; align-items:center; gap:7px;
  margin:0; font-size:16px; color:#000; cursor:pointer;
}
.reikoform .radio-opt input{ width:16px; height:16px; margin:0; flex:none; }

.feld-hilfe{ display:block; margin-top:8px; font-size:13px; color:#555; }

/* Feldfehler von FormIt. Ohne Fehler ist das Element leer und verschwindet –
   deshalb steht [[!+fi.error.x]] im Markup ohne Leerzeichen drumherum. */
.feld-fehler{
  margin:-4px 0 10px; padding:0 12px;
  color:#ce000c; font-size:14px;
}
.feld-fehler:empty{ display:none; }

/* Sammelmeldung über dem Formular */
.fi-fehler{
  margin-bottom:20px; padding:12px 15px;
  border-left:4px solid #ce000c; border-radius:0 6px 6px 0;
  background-color:#fdf0ef;
  color:#ce000c;
}

/* Bestätigung nach dem Absenden */
.erfolg{
  padding:20px;
  border-left:4px solid var(--tuerkis, #2dc2ab); border-radius:0 6px 6px 0;
  background-color:#f5f9fc;
}
.erfolg h4{ margin-top:0; color:var(--blau); }
.erfolg p:last-child{ margin-bottom:0; }

.einwilligung{
  display:flex; gap:10px; align-items:flex-start;
  margin:18px 0 20px;
  font-size:14px; font-weight:400; color:#000;
}
.einwilligung input{ flex:none; margin-top:3px; width:16px; height:16px; }

.form-hinweis{ margin:12px 0 0; font-size:14px; color:#555; }

/* --------------------------------------------- Kontaktkarte daneben --- */

.danach{ margin:0 0 20px; padding-left:20px; }
.danach li{ margin-bottom:10px; }

.karte-fuss{
  margin:0; padding-top:15px;
  border-top:1px solid #eaeaea;
  font-size:13px; color:#555;
}

/* ---------------------------------------------------------------- FAQ -- */

.faq{ border-top:1px solid #eaeaea; }
.faq-i{ border-bottom:1px solid #eaeaea; }

.faq-i summary{
  padding:15px 40px 15px 0;
  color:var(--blau);
  font-size:21px; font-weight:300;
  cursor:pointer; list-style:none; position:relative;
  transition:color .25s ease;
}
.faq-i summary::-webkit-details-marker{ display:none; }
.faq-i summary::after{
  content:"\f067"; font-family:"Font Awesome 5 Free"; font-weight:900;
  position:absolute; right:5px; top:20px;
  font-size:16px; color:var(--blau);
  transition:transform .25s ease;
}
.faq-i[open] summary::after{ transform:rotate(45deg); }
.faq-i summary:hover{ color:var(--blau-tief); }
.faq-i p{ margin:0 0 20px; padding-right:40px; }

/* ------------------------------------------------- Partner-Karussell --
   Owl setzt .owl-loaded, sobald es initialisiert ist. Fällt es aus – weil
   das Plugin fehlt oder JavaScript blockiert ist –, greift diese Regel und
   aus den Logos wird eine ordentliche statische Reihe statt eines Stapels
   in Originalgröße. Im geladenen Zustand ändert sie nichts.              */

.owl-carousel:not(.owl-loaded){
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center;
  gap:20px;
}
.owl-carousel:not(.owl-loaded) .item img{ max-height:70px; width:auto; }

/* ------------------------------------------------------------- Anker --- */

[id]{ scroll-margin-top:20px; }

/* --------------------------------------------------- Kleine Displays --- */

@media (max-width:765px){
  .beleg-kopf{ flex-direction:column; align-items:stretch; }
  .beleg-datei{ flex:0 0 auto; }
  .beleg-schalter{ width:100%; }
  .beleg-tab{ flex:1; min-height:44px; }        /* daumentauglich */

  .beleg, .daten{ padding:15px; }
  .daten code{ font-size:11px; line-height:1.8; }

  .leistungen, .service{ margin-top:20px; }
  .frist-jetzt{ box-shadow:var(--grau-card) 0 2px 12px, 0 0 0 2px var(--blau); }

  .karte-innen{ padding:18px; }
  .btn-block-sm{ display:block; width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}