@import url("leistungen.css");
:root {
  --petrol:#19343D; --limette:#D8F27B; --creme:#F6F5EF; --sand:#EAE9E2;
  --gedaempft:#52666A; --footer:#112930; --weiss:#FFFFFF; --weich:#d7e2e1;
  --karte:#294850; --linie:#78918c; --linie-hell:#c9ccc5;
  --schrift:"Segoe UI",Arial,Helvetica,sans-serif; --titel:Arial,Helvetica,sans-serif;
  --klein:.78rem; --text:1rem; --mittel:1.2rem; --gross:1.6rem;
  --h1:clamp(2.4rem,11vw,3.2rem); --h2:clamp(1.75rem,6.8vw,2.2rem);
  --hero-groesse:clamp(2.5rem,11.4vw,3.2rem); --zeilenhoehe:1.6;
  --titelhoehe:1.08; --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem;
  --s5:2rem; --s6:2.75rem; --s7:5rem; --s8:7rem;
  --radius:1rem; --radius-klein:.35rem; --radius-bild:1.6rem; --pille:5rem;
  --max:1280px; --rand:1rem; --duenn:1px; --fokus:3px;
  --logo-breite:clamp(170px,52vw,225px); --logo-desktop-breite:262.5px; --klickhoehe:48px; --lesebreite:700px;
  --tempo:240ms; --langsam:550ms; --kurve:cubic-bezier(.2,.65,.3,1);
  --hub:translateY(-3px); --ruhig:translateY(0);
  --schatten:0 20px 50px #11293018; --schatten-dunkel:0 24px 50px #11293055;
  --fein:.04em; --eng:-.04em; --sehr-eng:-.065em;
  --bildhoehe:240px; --portraethoehe:260px; --nummer:44px; --nummerhoehe:48px;
  --foto-zoom:1.035; --linienbreite:3rem; --versatz:2.5rem;
  --nachrichthoehe:150px; --checkbox:20px; --artikel-h1:clamp(2.3rem,6vw,4.2rem); --artikel-h2:clamp(1.5rem,4vw,2.1rem);
  --etikett:.875rem; --artikel-bildbreite:clamp(84px,28vw,120px); --notizschrift:Georgia,serif;
  --hero-abstand:1.5rem; --hero-titelabstand:1.25rem; --leiser-hub:translateY(-2px);
  --journal-abstand:3rem;
  --artikel-format:16 / 10; --hero-zoom:1; --verbinder-groesse:40px; --verbinder-linie:12px;
}
.seite {margin:0; background:var(--creme); color:var(--petrol); font-family:var(--schrift); font-size:var(--text); line-height:var(--zeilenhoehe); -webkit-font-smoothing:antialiased;}
.breite {max-width:var(--max); margin:auto; padding:var(--s6) var(--rand); box-sizing:border-box;}
.kopf {background:var(--petrol); color:var(--weiss);}
.kopfinhalt {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--s3); padding-top:var(--s3); padding-bottom:var(--s3); border-bottom:var(--duenn) solid var(--linie);}
.logo {display:block; width:var(--logo-breite); height:auto; max-width:100%; object-fit:contain;}
.logo-link {display:block;flex-shrink:0;max-width:100%;}
.menue-link {display:flex;align-items:center;min-height:var(--klickhoehe);min-width:var(--klickhoehe);}
.navigation {display:flex; gap:var(--s4); align-items:center;}
.navigation-mobil {display:none;}
.navigation-offen {display:flex; flex-basis:100%; flex-direction:column; align-items:stretch; padding:var(--s3) 0;}
.menuknopf {font:inherit; color:var(--weiss); background:transparent; border:var(--duenn) solid var(--linie); border-radius:var(--pille); padding:var(--s1) var(--s3); min-height:var(--klickhoehe); cursor:pointer;}
.sprung {display:block; max-height:0; overflow:hidden; background:var(--limette); color:var(--petrol); font-size:var(--klein); text-align:center;}
.sprung:focus {max-height:none; padding:var(--s2);}
.link {color:inherit; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.25em; transition:text-decoration-color var(--tempo),color var(--tempo);}
.link:hover {text-decoration-color:currentColor;}
.dunkel {--flaeche:var(--petrol); --farbe:var(--weiss); --neben:var(--weich); --fokusfarbe:var(--limette);}
.hell {--flaeche:var(--creme); --farbe:var(--petrol); --neben:var(--gedaempft); --fokusfarbe:var(--petrol);}
.sand {--flaeche:var(--sand); --farbe:var(--petrol); --neben:var(--gedaempft); --fokusfarbe:var(--petrol);}
.abschnitt {background:var(--flaeche); color:var(--farbe);}
.abschnittkopf {max-width:var(--lesebreite);}
.augenbraue {font-size:var(--klein); font-weight:600; text-transform:uppercase; letter-spacing:var(--fein); margin:0 0 var(--s4); color:var(--neben);}
.akzent {color:var(--limette);}
.h1 {font-family:var(--titel); font-size:var(--h1); font-weight:700; line-height:var(--titelhoehe); letter-spacing:var(--eng); margin:0 0 var(--s5); text-wrap:balance; overflow-wrap:break-word;}
.h2 {font-family:var(--titel); font-size:var(--h2); line-height:1.18; letter-spacing:var(--eng); margin:0 0 var(--s4); text-wrap:balance; overflow-wrap:break-word;}
.h3 {font-size:var(--mittel); line-height:1.35; margin:0 0 var(--s2); letter-spacing:-.02em;}
.zeile {display:block; margin-top:var(--s2);}
.text {margin:0 0 var(--s4); color:var(--neben,inherit); max-width:var(--lesebreite);}
.untertitel {font-size:var(--mittel); font-weight:600; line-height:1.5; margin:0 0 var(--s4);}
.hinweis {font-size:var(--klein); color:var(--neben,var(--gedaempft)); margin:var(--s3) 0 0;}
.knopf {display:inline-flex; align-items:center; justify-content:center; gap:var(--s3); padding:var(--s2) var(--s4); border:var(--duenn) solid transparent; border-radius:var(--pille); background:var(--limette); color:var(--petrol); font:inherit; font-weight:600; text-decoration:none; min-height:var(--klickhoehe); box-sizing:border-box; cursor:pointer; transition:transform var(--tempo) var(--kurve),background var(--tempo),box-shadow var(--tempo);}
.knopf:hover {transform:var(--hub); box-shadow:var(--schatten); background:var(--weiss); color:var(--petrol);}
.kontur {background:transparent; border-color:currentColor; color:inherit;}
.voll {width:100%;}
.hero {--hub:var(--leiser-hub);background:var(--petrol);}
.angebot {--hub:var(--leiser-hub);--leistungs-hub:var(--leiser-hub);}
.heroaufbau {display:flex; flex-direction:column; max-width:var(--max); margin:auto;}
.herotext {width:100%; padding-top:var(--hero-abstand);padding-bottom:var(--s4);}
.hero-augenbraue {margin-bottom:var(--s2);}
.hero-titel {font-size:var(--hero-groesse); letter-spacing:var(--sehr-eng); line-height:1.04; margin-bottom:var(--hero-titelabstand);}
.hero-subline {margin-bottom:var(--s2);}
.hero-botschaft {line-height:1.55;margin-bottom:var(--s3);}
.hero-hinweis {margin-top:var(--s2);}
.wow {width:fit-content; padding-right:var(--s2);}
.hero-bild {margin:0; padding:0 var(--rand) var(--s5); width:100%; box-sizing:border-box; min-width:0;}
.fotofenster {overflow:hidden; border-radius:var(--radius-bild) var(--radius-klein) var(--radius-bild) var(--radius-klein); background:var(--footer);}
.hero-foto {display:block;width:100%;height:auto;object-fit:contain;object-position:center;transition:transform var(--langsam) var(--kurve);}
.fotofenster:hover {--foto-zoom:1.06;}
.bildlegende {display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s1); padding:var(--s3) 0 0; color:var(--weich);}
.bildgedanke {font-size:var(--text); font-weight:600;}
.bildstatus {font-size:var(--klein); color:inherit; opacity:.8;}
.magie-aufbau {display:flex; flex-direction:column; gap:var(--s3);}
.magie-einleitung {flex:1; min-width:0;}
.magie-buehne {flex:1; min-width:0;}
.tabs {display:flex; gap:var(--s1); margin:var(--s3) 0 var(--s4); border-bottom:var(--duenn) solid var(--linie-hell); padding-bottom:var(--s2);}
.tab {flex:1; min-width:0; border:0; border-radius:var(--pille); padding:var(--s2) var(--s1); font:inherit; font-weight:600; background:transparent; color:var(--gedaempft); cursor:pointer; min-height:var(--klickhoehe); transition:background var(--tempo),color var(--tempo),transform var(--tempo);}
.tab:hover {background:var(--sand);}
.tab-aktiv {background:var(--petrol); color:var(--creme);}
.tab-aktiv:hover {background:var(--petrol);}
.vergleich {display:flex;flex-direction:column;gap:0;}
.beispiel {padding:var(--s4); border-radius:var(--radius); background:var(--sand); flex:1; min-width:0; box-sizing:border-box;}
.vorher-karte {border:var(--duenn) solid var(--linie-hell);border-radius:var(--radius-klein) var(--radius) var(--radius) var(--radius);}
.vorher-text {margin:0; line-height:1.6; color:var(--gedaempft);}
.nachher {background:var(--petrol); color:var(--weiss); box-shadow:var(--schatten); border-top:var(--fokus) solid var(--limette);}
.vergleich-marke {display:block; font-family:Georgia,serif; font-size:var(--s6); height:var(--s5); line-height:1; color:var(--limette); margin-bottom:var(--s3);}
.vergleich-verbinder {display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;}
.vergleich-linie {width:var(--duenn);height:var(--verbinder-linie);background:var(--linie);}
.vergleich-pfeil {display:block;width:var(--verbinder-groesse);height:var(--verbinder-groesse);padding:var(--s1);box-sizing:border-box;border-radius:var(--pille);color:var(--petrol);background:var(--limette);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.beispieltext {font-size:var(--gross); line-height:1.25; letter-spacing:-.025em; margin:var(--s3) 0; font-weight:700; text-wrap:balance;}
.philosophie-aufbau {display:flex; flex-direction:column; gap:var(--s4);}
.philosophie-stimme {flex:1; min-width:0;}
.philosophie-text {margin-bottom:0;}
.philosophie-motiv {flex:1; min-width:0;}
.handwerk-bild {margin:0;background:var(--footer);border-radius:var(--radius-bild) var(--radius-klein) var(--radius) var(--radius);overflow:hidden;border:var(--duenn) solid var(--linie);}
.handwerk-grafik {display:block; width:100%; height:auto; border-radius:var(--radius-bild) var(--radius-klein) var(--radius-klein) var(--radius-klein);}
.handwerk-legende {display:flex; flex-direction:column; gap:var(--s1);padding:var(--s4);border-top:var(--duenn) solid var(--linie);}
.handwerk-gedanke {font-family:var(--notizschrift);font-size:var(--gross);font-style:italic;font-weight:400;line-height:1.25;}
.werte {display:flex; gap:var(--s3); justify-content:space-between; margin-top:var(--s5); padding-top:var(--s4); border-top:var(--duenn) solid var(--linie);}
.wert {flex:1; min-width:0;}
.werttitel {font-size:var(--text); color:var(--limette); margin:0; letter-spacing:-.03em;}
.banner {background:var(--limette); color:var(--petrol); font-size:var(--mittel); line-height:1.4; text-wrap:balance; font-weight:650; padding:var(--s4); border-radius:var(--radius-klein) var(--radius) var(--radius-klein) var(--radius); margin:var(--s5) 0 0;}
.artikelliste {display:flex;flex-direction:column;gap:var(--s4);margin:var(--s4) 0;}
.artikelzeile {display:flex;flex-direction:column;align-items:stretch;min-width:0;box-sizing:border-box;border:var(--duenn) solid var(--linie-hell);border-radius:var(--radius-bild) var(--radius-klein) var(--radius-klein) var(--radius-klein);overflow:hidden;text-decoration:none;color:var(--petrol);transition:transform var(--tempo) var(--kurve),border-color var(--tempo);}
.artikel-copy {display:flex;flex-direction:column;min-width:0;flex:1;padding:var(--s3);}
.artikel-titel {font-size:clamp(1.05rem,4.7vw,1.2rem);line-height:1.4;}
.artikel-index {font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700;}
.artikel-entwurfsstatus {display:block;}
.artikel-aktion {display:flex;align-items:center;box-sizing:border-box;min-height:var(--klickhoehe);margin-top:auto;padding-top:var(--s2);border-top:var(--duenn) solid var(--linie-hell);}
.artikelzeile:hover {transform:var(--leiser-hub);border-color:var(--gedaempft);}
.artikelzeile:focus-visible {outline:var(--fokus) solid var(--petrol); outline-offset:4px;}
.miniatur {--motiv-hintergrund:var(--sand);width:100%;flex-shrink:0;min-width:0;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;background:var(--motiv-hintergrund);}
.miniatur-website {--motiv-hintergrund:var(--petrol);}
.miniatur-kamera {--motiv-hintergrund:var(--limette);}
.artikel-grafik {display:block;width:100%;height:auto;aspect-ratio:var(--artikel-format);object-fit:contain;transition:transform var(--langsam) var(--kurve);}
.miniatur-status {font-size:var(--klein);text-align:center;color:var(--gedaempft);background:var(--sand);padding:var(--s1);}
.kategorie {font-size:var(--klein); text-transform:uppercase; letter-spacing:var(--fein); color:var(--gedaempft); margin:0 0 var(--s2);}
.wachmacher {border:var(--duenn) solid var(--linie); border-left:var(--fokus) solid var(--limette); border-radius:var(--radius); padding:var(--s4); margin-top:var(--s4);}
.zweispaltig {display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s5);}
.spalte {flex:1; min-width:0;}
.portraet {display:flex; flex-direction:column; gap:var(--s3);}
.portraet-rahmen {display:flex;flex-direction:column;justify-content:center;min-height:var(--portraethoehe);box-sizing:border-box;padding:var(--s4);border:var(--duenn) solid var(--gedaempft);border-radius:var(--radius-bild) var(--radius-klein) var(--radius-klein) var(--radius-klein);background:linear-gradient(135deg,var(--sand),var(--creme));box-shadow:inset 0 0 0 var(--s2) var(--creme);}
.portraet-marke {font:italic var(--s7)/.7 Georgia,serif; color:var(--gedaempft);}
.bildzeichen {font-size:var(--h2); font-weight:700; line-height:1.2; letter-spacing:var(--eng); margin:var(--s3) 0 var(--s4);}
.portraet-signatur {font-family:Georgia,serif; font-size:var(--text); font-style:italic; text-align:right; color:var(--gedaempft);}
.ablauf-liste {display:flex;flex-direction:column;}
.prozess {display:flex;gap:var(--s3);margin-top:var(--s3);padding-top:var(--s4);border-top:var(--duenn) solid var(--linie);max-width:var(--lesebreite);}
.nummer {display:flex; align-items:center; justify-content:center; color:var(--limette); border:var(--duenn) solid var(--linie); border-radius:var(--radius); font-size:var(--gross); font-weight:600; flex:0 0 var(--nummer); height:var(--nummerhoehe);}
.frage {border-bottom:var(--duenn) solid var(--linie-hell); padding:var(--s4) 0;}
.frageknopf {font:inherit;font-size:var(--text);font-weight:600;color:var(--petrol);background:transparent;border:0;display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;gap:var(--s3);cursor:pointer;padding:0;min-height:var(--klickhoehe);transition:color var(--tempo);}
.frageknopf:hover {color:var(--gedaempft);}
.fragezeichen {font-size:var(--gross);font-weight:400;flex-shrink:0;min-width:var(--s4);text-align:center;}
.antwort {margin:var(--s3) 0 0; color:var(--gedaempft); max-width:var(--lesebreite);}
.kontaktaufbau {display:flex; flex-direction:column; gap:var(--s5);}
.kontakttext {flex:1; min-width:0;}
.formular {--neben:var(--gedaempft); --fokusfarbe:var(--petrol); background:var(--creme); color:var(--petrol); border-radius:var(--radius); padding:var(--s4); box-sizing:border-box; flex:1; min-width:0;}
.feldgruppe {display:flex; flex-direction:column; gap:var(--s1); margin-top:var(--s3); margin-bottom:var(--s3);}
.beschriftung {font-size:var(--etikett);font-weight:600;color:var(--gedaempft);}
.eingabe {font:inherit; color:var(--petrol); background:transparent; border:var(--duenn) solid var(--gedaempft); border-radius:var(--pille); padding:var(--s2) var(--s3); min-height:var(--klickhoehe); min-width:0; box-sizing:border-box; width:100%; transition:border-color var(--tempo);}
.eingabe:focus {border-color:var(--petrol);outline:var(--fokus) solid var(--petrol);outline-offset:4px;}
/* Native Platzhalter brauchen volle Deckkraft für ausreichenden Textkontrast. */
.eingabe::placeholder {color:var(--gedaempft);opacity:1;}
.nachricht {border-radius:var(--radius); min-height:var(--nachrichthoehe); resize:vertical;}
.einwilligung {display:flex; gap:var(--s2); font-size:var(--klein); margin-bottom:var(--s4); align-items:flex-start;}
.checkbox {width:var(--s4);height:var(--s4);flex-shrink:0;accent-color:var(--petrol);}
.inaktiv {background:var(--sand); color:var(--gedaempft); cursor:default; pointer-events:none;}
.fuss {background:var(--footer); color:var(--weiss); --neben:var(--weich); border-top:var(--duenn) solid var(--linie);}
.fussaufbau {--logo-breite:225px;display:flex;flex-direction:column;gap:var(--s4);}
.fusslinks {display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:var(--etikett);}
.fusslink {display:flex;align-items:center;min-height:var(--klickhoehe);min-width:var(--klickhoehe);flex-basis:calc((100% - var(--s3)) / 2);}
.lesebreite {max-width:var(--lesebreite);}
.redaktion {font-size:var(--text); padding:var(--s5) 0;}
.artikelseite {--h1:var(--artikel-h1); --h2:var(--artikel-h2);}
.sachseite {min-height:60vh;}
.unsichtbar {display:none;}
.fokus:focus-visible,.link:focus-visible,.knopf:focus-visible,.tab:focus-visible,.frageknopf:focus-visible,.eingabe:focus-visible,.menuknopf:focus-visible,.checkbox:focus-visible,.textpanel:focus-visible {outline:var(--fokus) solid var(--fokusfarbe,var(--limette)); outline-offset:4px;}
@media (min-width:768px) {
  :root {--rand:2.5rem;--h1:4rem;--h2:2.6rem;--text:1.1rem;--s6:3.5rem;--bildhoehe:360px;--hero-groesse:5rem;--portraethoehe:380px;}
  .navigation {gap:var(--s3);}
  .herotext {padding-top:var(--s5);}
  .hero-bild {padding-bottom:var(--s6);}
  .vergleich {flex-direction:row; align-items:stretch;}
  .vergleich-verbinder {flex-direction:row;align-self:center;}
  .vergleich-linie {width:var(--verbinder-linie);height:var(--duenn);}
  .vergleich-pfeil {transform:rotate(-90deg);}
  .beispiel {padding:var(--s4);}
  .artikelliste {flex-direction:row;align-items:stretch;}
  .artikelzeile {flex:1 1 0;}
  .zweispaltig {flex-direction:row; align-items:center; gap:var(--s5);}
  .nummer {--nummer:64px; --nummerhoehe:70px;}
  .formular {padding:var(--s5);}
  .fussaufbau {flex-direction:row; justify-content:space-between; align-items:center; gap:var(--s6);}
  .fusslink {flex-basis:auto;}
}
@media (min-width:1025px) {
  :root {--s6:6rem; --h1:5rem; --h2:3rem; --hero-groesse:clamp(4.8rem,6.8vw,6.5rem); --bildhoehe:500px; --portraethoehe:440px;}
  .menuknopf {display:none;}
  .navigation-mobil {display:flex;}
  .kopfinhalt {--logo-breite:var(--logo-desktop-breite);padding-top:var(--s4); padding-bottom:var(--s4);}
  .fussaufbau {--logo-breite:var(--logo-desktop-breite);}
  .navigation {gap:var(--s5);}
  .heroaufbau {flex-direction:row; align-items:center; padding:var(--s4) var(--rand) var(--s6); box-sizing:border-box; gap:var(--s5);}
  .herotext {flex:1.15; min-width:0; padding:var(--s5) 0 0; margin:0;}
  .hero-titel {margin-bottom:var(--s5);}
  .hero-subline {margin-bottom:var(--s4);}
  .hero-botschaft {margin-bottom:var(--s4);}
  .hero-augenbraue {margin-bottom:var(--s4);}
  .hero-bild {flex:.85; width:0; min-width:0; padding:var(--s7) 0 0; margin:0; align-self:stretch; display:flex; flex-direction:column; justify-content:flex-end;}
  .hero-foto {--hero-zoom:var(--foto-zoom);height:var(--bildhoehe);object-fit:cover;object-position:61% center;}
  .fotofenster {border-radius:var(--s8) var(--radius-klein) var(--radius-klein) var(--radius-klein); box-shadow:var(--schatten-dunkel);}
  .bildlegende {flex-direction:column;}
  .magie-aufbau {flex-direction:row; align-items:flex-start; gap:var(--s6);}
  .magie-einleitung {flex:.8; padding-top:var(--s3);}
  .magie-buehne {flex:1.2;}
  .philosophie-aufbau {flex-direction:row; gap:var(--s6); align-items:center;}
  .philosophie-stimme {flex:.9;}
  .philosophie-motiv {flex:1.1; padding-top:var(--s6);}
  .handwerk-grafik {min-height:320px; object-fit:cover;}
  .journal {--lesebreite:620px;}
  .artikelliste {margin-top:var(--journal-abstand);}
  .artikel-titel {font-size:var(--mittel);}
  .wachmacher {margin-top:var(--s7); max-width:820px; margin-left:auto; padding:var(--s5);}
  .zweispaltig {gap:var(--s6); align-items:center;}
  .portraet {flex:.8; margin-top:var(--s5);}
  .portraet-rahmen {border-radius:var(--s8) var(--radius-klein) var(--radius-klein) var(--radius-klein);}
  .ablauf-liste {flex-direction:row;gap:var(--s5);}
  .prozess {flex:1;flex-direction:column;min-width:0;}
  .nummer {align-self:flex-start;flex:0 0 auto;width:var(--nummer);}
  .frageknopf {font-size:var(--mittel);}
  .kontaktaufbau {flex-direction:row; gap:var(--s6); align-items:flex-start;}
  .kontakttext {flex:.9;}
  .formular {flex:1.1;}
}
@media (prefers-reduced-motion:no-preference) {
  .hero-titel {animation:ankommen var(--langsam) var(--kurve) both;}
  .hero-foto {animation:bildlicht 900ms var(--kurve) both;}
  .fotofenster:hover {transform:var(--ruhig);}
  .hero-foto:hover {transform:scale(var(--hero-zoom));}
  .artikel-grafik:hover {transform:scale(var(--foto-zoom));}
}
@media (prefers-reduced-motion:reduce) {
  :root {--tempo:0ms; --langsam:0ms; --hub:translateY(0); --foto-zoom:1;}
  .hero-titel,.hero-foto {animation:none;}
  .knopf:hover,.artikelzeile:hover {transform:none;}
}
@keyframes ankommen {from {opacity:.3; transform:translateY(10px);} to {opacity:1; transform:translateY(0);}}
@keyframes bildlicht {from {opacity:.4;} to {opacity:1;}}
@media (max-width:767px) {
  .herotext {--hero-abstand:1.125rem;--hero-titelabstand:1rem;padding-bottom:var(--s3);}
  .werte {margin-top:var(--s4);padding-top:var(--s3);}
  .banner {margin-top:var(--s4);}
  .vorstellung-text {border-top:var(--duenn) solid var(--linie-hell);padding-top:var(--s4);}
}