/* =====================================================================
   STEFANO FANELLO · RAHMEN
   Gilt auf JEDER Seite: Startseite, Unterseiten, Rechtstexte, Kontakt,
   Widerruf und Register-Seiten. Enthält
   1. die Schriftgrößen (einzige Stelle, Variablen --fs-…)
   2. den Header (Band oben + Logo)
   3. den Footer (Links, Kugel, Signatur, Band unten)
   Bilder liegen in /img/, deshalb muss diese Datei im Hauptverzeichnis
   liegen. Einbinden mit  <link rel="stylesheet" href="/rahmen.css">
   ===================================================================== */

@font-face {
         font-family: 'Lato';
         font-style: normal;
         font-weight: 400;
         font-display: swap;
         src: url('../fonts/Lato-400.woff2') format('woff2');
}

/********************************************* TYPOGRAFIE *********************************************
   EINZIGE Stelle für Schriftgrößen. Alle Elemente nutzen diese Variablen,
   im Mobil-Block darunter werden nur die Werte umgeschaltet.
   Neue Größe nötig? Hier ergänzen, nicht direkt im Element.

                  Desktop   Mobil (bis 768px)
   --fs-h1          78px      36px     Hero-Überschrift
   --fs-h2          42px      21px     Abschnitts-Überschriften, Preise, Zahlen
   --fs-h3          30px      16px     Unter-Überschriften, Kartentitel
   --fs-h4          20px      14px     kleine Titel, Zitate, Zähler
   --fs-p           14px      12px     Fließtext
   --fs-small       11px      10px     Labels, Hinweise, Footer
   --fs-button      23px      18px     Buttons
   --fs-input       18px      16px     Eingabefelder (unter 16px zoomt das iPhone)

   BREAKPOINTS: nur zwei
   max-width: 768px  Mobil (Schrift + Layout)
   max-width: 900px  Tablet (nur Layout, keine Schriftgrößen)
*/
html {
         --fs-h1: 78px;
         --fs-h2: 42px;
         --fs-h3: 30px;
         --fs-h4: 20px;
         --fs-p: 14px;
         --fs-small: 11px;
         --fs-button: 23px;
         --fs-input: 18px;
}

         @media (max-width: 768px) {
                  html {
                           --fs-h1: 36px;
                           --fs-h2: 21px;
                           --fs-h3: 16px;
                           --fs-h4: 14px;
                           --fs-p: 12px;
                           --fs-small: 10px;
                           --fs-button: 18px;
                           --fs-input: 16px;
                  }
         }

/********************************************* NAVIGATION *********************************************/
div.nav {
         background: #fff;
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

div.nav div.nav-ribbon {
         border-top: 5px solid #C8A866;
         width: 100%;
}

div.nav div.nav-ribbon img {
         position:relative;
         top:-5px;
}

div.nav img.nav-logo {
         height: 30px;
         margin-bottom: 20px;
}

/* Textlinks: auf jeder Seite gleich – Grün, gold unterstrichen.
   Buttons und Footer-Links haben eigene Regeln und bleiben unberührt. */
a {
         color: var(--verde, #1A3A28);
         text-decoration: underline;
         text-decoration-color: #C8A866;
         text-decoration-thickness: 1px;
         text-underline-offset: 3px;
}

/* Bänder nie breiter als das Fenster (auch auf Seiten ohne style.css) */
div.nav,
div.footer {
         overflow-x: clip;
}

/* Header und Footer nie breiter als 1980px – auch auf Seiten ohne style.css (z. B. Register, Kontakt) */
div.nav,
div.footer {
         max-width: 1980px;
         margin-left: auto;
         margin-right: auto;
         box-sizing: border-box;
}

/* Logo im Header führt zur Startseite */
div.nav a.nav-home {
         display: block;
         line-height: 0;
}

/********************************************* FOOTER *********************************************/
div.footer {
         background: #fff;
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
         box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.10);
         position:relative;
}

div.footer:before {
         background: url(../img/sphere_white_top.png);
         background-position: bottom center;
         background-repeat: no-repeat;
         
         position:absolute;
         bottom:75px;
         content:" ";
         width:100%;
         height:232px;
}

div.footer:after {
         background: url(../img/signature_footer.svg);
         background-position: center center;
         background-repeat: no-repeat;
         position:absolute;
         bottom:65px;
         content:" ";
         width:100%;
         height:50px;
}

div.footer ul,
div.footer li {
         font-family: "Lato", sans-serif;
         line-height: 28px;
}

div.footer li {
         margin: 0;
         padding: 0;
         font-size: var(--fs-small);
}

div.footer ul {
         padding: 0px;
         margin: 15px 0px 0px 0px;
         list-style: none;
         display: flex;
         gap: 30px;
}

div.footer ul li a {
         font-family: "Lato";
         font-size: var(--fs-small);
         color: #232323;
         text-transform: uppercase;
         text-decoration: none;
}

div.footer div.footer-ribbon {
         border-bottom: 5px solid #c9a967;
         width: 100%;
}

div.footer div.footer-ribbon img {
         margin-bottom: -14px;
}

         @media (max-width: 768px) {
                 div.footer:before {
                         background-position: bottom center;
                         background-size:1000px;
                         bottom:205px;  /* +20px: 7 Links statt 6 (Vertrag widerrufen) */
                         height:100px;
                 }

                 div.footer:after {
                         bottom:185px;
                 }


                  div.footer ul,
                  div.footer li {
                           line-height: 20px;
                  }

                  div.footer ul {
                           flex-direction: column;
                           align-items: center;
                           gap: 0px;
                           padding: 10px 0px 15px 0px;
                  }

                  div.footer div.footer-ribbon img {
                         margin-bottom: -10.5px;
                 }
         }