/* SIBA Solution – Gestaltung nach CI-Mappe "CI - Siba Solution" (Stand 06.11.2026) */
@font-face{font-family:Syne;src:url(fonts/syne-variabel.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:Carlito;src:url(fonts/carlito-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Carlito;src:url(fonts/carlito-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
  /* Farben aus LIESMICH.txt */
  --nachtviolett:#23213A;   /* Text, dunkle Flächen */
  --lavendel:#B7B6C8;       /* Logofarbe, nur als Fläche oder auf Dunkel */
  --lavendel-tief:#55537A;  /* Links, Zwischenüberschriften, Rahmen */
  --lavendel-hell:#E9E8F0;  /* getönte Flächen, Karten */
  --papier:#F7F6FA;         /* Seitenhintergrund */
  --weiss:#FFFFFF;
  --minze:#1C7567;          /* Akzent, sparsam */
  --minze-hell:#DDEEEA;     /* ruhige Akzentfläche */
  --grau:#5F5D72;           /* Nebentext */
  --linie:#D8D7E2;          /* Trennlinien */

  /* Schriften: Syne fett / Carlito, beide frei (OFL) und lokal ausgeliefert; Ersatz Trebuchet MS / Arial */
  --font-head:Syne,"Trebuchet MS",Arial,sans-serif;
  --font-text:Carlito,"Segoe UI",Arial,sans-serif;

  --radius:12px;
  --pill:999px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--nachtviolett);font-family:var(--font-text);font-size:1.125rem;line-height:1.6;display:flex;flex-direction:column;min-height:100vh;overflow-wrap:break-word}
img{max-width:100%;height:auto}
a{color:var(--lavendel-tief);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--nachtviolett);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--minze);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:70rem;margin:0 auto;padding:0 1.5rem}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--weiss);color:var(--nachtviolett);padding:.5rem 1rem;z-index:10}

/* Kopf: weißer Grund, Logo Nachtviolett */
.site-head{background:var(--weiss);border-bottom:1px solid var(--linie)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;padding-bottom:1rem}
.brand{display:block;flex:none;line-height:0}
.brand img{display:block;width:132px;min-width:120px;height:auto}
.nav{display:flex;gap:1.75rem;list-style:none;margin:0;padding:0}
.nav a{font-family:var(--font-head);font-weight:700;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nachtviolett);text-decoration:none;padding:.4rem 0;border-bottom:3px solid transparent}
.nav a:hover{border-bottom-color:var(--lavendel)}
.nav a[aria-current=page]{border-bottom-color:var(--minze)}

/* Überschriften */
main{flex:1}
h1,h2{font-family:var(--font-head);font-weight:700;line-height:1.15;margin:0 0 1rem}
h1{font-size:clamp(1.85rem,5vw,3.3rem);letter-spacing:-.01em;hyphens:auto;-webkit-hyphens:auto}
h2{font-size:1.3rem;margin-top:2.25rem;color:var(--lavendel-tief)}
p{margin:0 0 1rem;max-width:40rem}
.lead{font-size:1.25rem;color:var(--grau)}

/* Innenseiten: Titel mit zwei Balken als Auftakt (Formensprache der Präsentation) */
.page{padding:3.5rem 1.5rem 4.5rem}
.page>h1::before{content:"";display:block;width:4.5rem;height:.5rem;margin-bottom:1.25rem;border-radius:var(--pill);background:linear-gradient(90deg,var(--lavendel-tief) 0 62%,transparent 62% 70%,var(--minze) 70%)}

/* Schaltflächen: Pillenform */
.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem}
.btn{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:1rem;line-height:1.3;padding:.8rem 1.6rem;border-radius:var(--pill);border:2px solid var(--minze);background:var(--minze);color:var(--weiss);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--nachtviolett);border-color:var(--nachtviolett);color:var(--weiss)}
.btn.ghost{background:transparent;color:var(--nachtviolett);border-color:var(--lavendel-tief)}
.btn.ghost:hover{background:var(--lavendel-tief);border-color:var(--lavendel-tief);color:var(--weiss)}

/* Startseite: dunkle Titelfläche mit versetzten Balken wie die Titelfolie */
.hero{position:relative;overflow:hidden;background:var(--nachtviolett);color:var(--weiss)}
.hero .wrap{position:relative;z-index:1;padding-top:5.5rem;padding-bottom:5.5rem}
.hero h1{max-width:34rem;color:var(--weiss)}
.hero p{font-size:1.3rem;color:var(--lavendel-hell);max-width:32rem}
.hero .btn{border-color:var(--minze)}
.hero .btn:hover{background:var(--weiss);border-color:var(--weiss);color:var(--nachtviolett)}
.hero .btn.ghost{color:var(--lavendel-hell);border-color:var(--lavendel)}
.hero .btn.ghost:hover{background:var(--lavendel);border-color:var(--lavendel);color:var(--nachtviolett)}
.hero :focus-visible{outline-color:var(--minze-hell)}
.stripes{position:absolute;right:0;top:50%;transform:translateY(-50%);width:34%;display:flex;flex-direction:column;align-items:flex-end;gap:1.1rem}
.stripes span{display:block;height:2.75rem;border-radius:var(--pill) 0 0 var(--pill)}
.stripes span:nth-child(1){width:84%;background:var(--lavendel-tief)}
.stripes span:nth-child(2){width:52%;background:var(--lavendel)}
.stripes span:nth-child(3){width:72%;background:var(--minze)}
.stripes span:nth-child(4){width:39%;background:var(--lavendel-tief)}
.stripes span:nth-child(5){width:62%;background:var(--lavendel-hell)}

/* Leistungsbereiche als Karten */
.fields{padding:4rem 0}
.fields ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.fields li{position:relative;padding:3.25rem 1.75rem 2rem;border-radius:var(--radius);background:var(--lavendel-hell);font-family:var(--font-head);font-weight:700;font-size:1.3rem;line-height:1.25}
.fields li:nth-child(2){background:var(--minze-hell)}
.fields li::before{content:"";position:absolute;left:1.75rem;top:1.75rem;width:2.5rem;height:.4rem;border-radius:var(--pill);background:var(--lavendel-tief)}
.fields li:nth-child(2)::before{background:var(--minze)}

/* Marken */
.brand-card{display:grid;grid-template-columns:18rem 1fr;gap:2.5rem;align-items:center;margin-top:2.75rem;padding:2rem;background:var(--lavendel-hell);border-radius:var(--radius)}
.brand-logo{background:var(--weiss);border-radius:var(--radius);padding:1.5rem;display:flex;align-items:center;justify-content:center}
.brand-logo img{display:block;width:100%;max-width:15rem}
.brand-card h2{margin-top:0;color:var(--nachtviolett)}

/* Kontakt */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.direct{font-family:var(--font-head);font-weight:700;font-size:1.3rem;line-height:1.5;margin:1.75rem 0;padding-left:1.25rem;border-left:4px solid var(--minze)}
.direct a{display:block;width:fit-content;max-width:100%}
form{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:1.75rem}
label{display:block;font-weight:700;font-size:1rem;margin:0 0 .3rem}
input,textarea{width:100%;font:inherit;color:inherit;padding:.6rem .75rem;border:1px solid var(--lavendel-tief);border-radius:8px;background:var(--papier);margin-bottom:1.1rem}
input:focus-visible,textarea:focus-visible{outline-offset:1px;background:var(--weiss)}
textarea{min-height:7rem;resize:vertical;margin-bottom:.25rem}
.count{font-size:.9rem;color:var(--grau);text-align:right;margin-bottom:1rem}
.hint{font-size:.95rem;color:var(--grau);margin:1rem 0 0}

/* Rechtstexte */
.legal p,.legal ul{max-width:44rem}
.legal h2{max-width:44rem;padding-top:1.25rem;border-top:1px solid var(--linie)}
.legal li{margin-bottom:.3rem}

/* Fuß: Nachtviolett, Logo Lavendel, Spalten mit feinen Linien wie die Brieffußzeile */
.site-foot{background:var(--nachtviolett);color:var(--lavendel-hell);font-size:1rem}
.site-foot .wrap{display:flex;align-items:flex-start;gap:2.5rem;flex-wrap:wrap;padding-top:2.75rem;padding-bottom:2.75rem}
.foot-logo{display:block;width:132px;min-width:120px;height:auto}
.site-foot address,.site-foot ul{font-style:normal;padding-left:1.5rem;border-left:1px solid var(--lavendel-tief)}
.site-foot strong{color:var(--weiss)}
.site-foot ul{list-style:none;margin:0}
.site-foot li+li{margin-top:.2rem}
.site-foot a{color:var(--weiss)}
.site-foot a:hover{color:var(--lavendel)}
.site-foot :focus-visible{outline-color:var(--minze-hell)}
.site-foot small{display:block;margin-top:.75rem;font-size:.9rem;color:var(--lavendel)}

@media (max-width:860px){
  .stripes{width:26%}
}
@media (max-width:760px){
  .hero .wrap{padding-top:3rem;padding-bottom:2rem}
  .stripes{position:static;transform:none;width:100%;padding-left:30%;padding-bottom:2.5rem;gap:.7rem}
  .stripes span{height:1.6rem}
  .fields{padding:2.5rem 0}
  .fields ul,.contact,.brand-card{grid-template-columns:1fr;gap:1rem}
  .contact{gap:2rem}
  .brand-card{padding:1.25rem;gap:1.5rem}
  .page{padding-top:2.5rem;padding-bottom:3.5rem}
}
@media (max-width:480px){
  .wrap,.page{padding-left:1rem;padding-right:1rem}
  .site-head .wrap{padding-top:.75rem;padding-bottom:.75rem}
  .brand img{width:120px}
  .nav{gap:1.1rem}
  .nav a{letter-spacing:.08em}
  form{padding:1.25rem}
  .site-foot .wrap{gap:1.75rem}
  .site-foot address,.site-foot ul{padding-left:1rem}
}