/* Gemeinsames Stylesheet der Nebenseiten: Impressum, Datenschutz, AGB,
   AGB Hosting, 404. Die Startseite (index.html) hat ihr eigenes,
   eingebettetes CSS und nutzt diese Datei NICHT.
   Farben, Schriften und Abstaende sind 1:1 aus den frueher je Seite
   kopierten <style>-Bloecken uebernommen. */

/* Schriften lokal — keine Verbindung zu Google-Servern. */
@font-face{
  font-family:'Montserrat';
  src:url('schriften/Montserrat.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Work Sans';
  src:url('schriften/WorkSans.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Work Sans';
  src:url('schriften/WorkSans-Italic.woff2') format('woff2-variations');
  font-weight:100 900;font-style:italic;font-display:swap;
}

:root{
  --green:#17320B;
  --black:#111111;
  --white:#FFFFFF;
  --white-40:rgba(255,255,255,0.4);
  --cream:#FAF7F0;
  --ink-70:rgba(17,17,17,0.72);
  --serif:'Work Sans', -apple-system, Helvetica, Arial, sans-serif;
  --maxw:1560px;
  --pad:clamp(20px, 4.5vw, 80px);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--cream);color:var(--black);
  font-family:var(--serif);
  font-size:clamp(16px, 0.42vw + 14.6px, 21px);
  letter-spacing:0.012em;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
a:focus-visible{outline:1px solid currentColor;outline-offset:5px;}

/* Kurze Seiten (404): Fusszeile am unteren Rand halten */
body.seite-kurz{min-height:100svh;display:flex;flex-direction:column;}
body.seite-kurz main{flex:1;width:100%;}

header{background:var(--green);color:var(--white);}
nav{
  max-width:var(--maxw);margin:0 auto;
  /* min-height statt height: auf schmalen Handys darf der Zurueck-Link
     in eine zweite Zeile rutschen, statt aus dem Bild zu laufen.
     Am Schreibtisch bleibt die Hoehe unveraendert. */
  padding:12px var(--pad);
  min-height:clamp(72px, 7vw, 104px);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.logo{
  font-family:'Montserrat', sans-serif;font-weight:400;
  font-size:clamp(12px, 0.9vw, 18px);letter-spacing:0.6em;
  text-transform:uppercase;white-space:nowrap;text-decoration:none;
}
.zurueck{
  font-family:'Montserrat', sans-serif;
  font-size:11.5px;letter-spacing:0.22em;text-transform:uppercase;
  text-decoration:none;color:var(--white);white-space:nowrap;
}
/* sehr schmale Handys: 0.6em Sperrung passt nicht mehr neben den Link
   (gleicher Kniff wie auf der Startseite) */
@media (max-width:400px){
  .logo{letter-spacing:0.42em;}
}
main{
  max-width:860px;margin:0 auto;
  padding:clamp(60px,8vw,110px) var(--pad) clamp(80px,10vw,140px);
}

/* h1–h3, p, ul/ol, li stylen vor allem den von IT-Recht Kanzlei
   nachgeladenen Rechtstext — im eigenen HTML kommen sie kaum vor.
   Nicht als "ungenutzt" entfernen. */
h1{
  font-family:'Montserrat', sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:0.14em;
  font-size:clamp(24px,3.2vw,40px);line-height:1.25;
  margin-bottom:clamp(36px,5vw,60px);
}
h2{
  font-weight:400;font-size:clamp(20px,1.8vw,28px);
  margin:clamp(34px,4vw,54px) 0 14px;
}
h3{
  font-weight:400;font-size:clamp(17px,1.3vw,21px);
  margin:26px 0 10px;
}
p{margin-bottom:16px;color:var(--ink-70);}
ul,ol{margin:0 0 16px 22px;color:var(--ink-70);}
li{margin-bottom:8px;}

/* AGB-Uebersicht: Liste der drei Dokumente. Trennung allein ueber
   Weissraum und Typografie, keine Rahmen (Stilregel Abschnitt 3). */
.agb-liste{margin-top:clamp(34px,4vw,54px);}
.agb-liste a{
  display:inline-block;
  font-size:clamp(20px,1.8vw,28px);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .35s ease;
  /* groessere Tippflaeche ohne Layoutaenderung */
  padding:10px 0;margin:0 0 -6px;
}
.agb-liste a:hover{border-bottom-color:var(--green);}
.agb-liste p{margin:6px 0 clamp(30px,3.4vw,46px);max-width:56ch;}
.agb-liste p:last-child{margin-bottom:0;}

/* Quellenangabe unter einem statisch eingebauten Rechtstext */
.quelle{
  margin-top:clamp(44px,5vw,70px);
  font-size:clamp(12px,0.8vw,14px);
  line-height:1.7;
}

/* Textlink mit Pfeil, wie die CTAs der Startseite — kein Kasten */
.cta-link{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:24px;
  font-family:'Montserrat', sans-serif;
  font-size:12px;letter-spacing:0.22em;text-transform:uppercase;
  text-decoration:none;color:var(--green);
}
.cta-link .arrow{
  display:inline-block;width:26px;height:1px;background:var(--green);
  position:relative;transition:width .35s ease;
}
.cta-link .arrow::after{
  content:"";position:absolute;right:0;top:-3.5px;
  width:8px;height:8px;
  border-top:1px solid var(--green);border-right:1px solid var(--green);
  transform:rotate(45deg);
}
.cta-link:hover .arrow{width:40px;}

footer{background:var(--green);color:var(--white-40);}
.foot-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(26px,3vw,40px) var(--pad);
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;
  font-family:'Montserrat', sans-serif;
  font-size:11px;letter-spacing:0.12em;
}
.foot-inner .links{display:flex;gap:32px;flex-wrap:wrap;}
/* zweite Zeile: Telefon und E-Mail (Framework 4), gleiche Schrift/Farbe */
.foot-inner .foot-kontakt{flex-basis:100%;display:flex;gap:32px;flex-wrap:wrap;}
/* Tippflaeche vergroessert, Layout unveraendert (padding + negatives margin) */
.foot-inner a{text-decoration:none;padding:12px 0;margin:-12px 0;}