@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Geist;src:url(/assets/fonts/geist-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Geist;src:url(/assets/fonts/geist-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#F7F8F8;
  --ink:#16181B;
  --muted:#6B7076;
  --line:#DFE2E4;
  --silver:#8A9198;
  --measure:65ch;
  --wrap:1240px;
  --pad:clamp(1.25rem,5vw,3rem);
  --section-y:clamp(4rem,9vw,7.5rem);
  --header-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Geist,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem;
  line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;
  line-height:1.15;
  margin:0;
}
p{margin:0 0 1.1em;max-width:var(--measure)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--section-y)}
/* Sprungziele muessen unter dem klebenden Header landen, nicht dahinter.
   Ohne diesen Abstand scrollt der Browser den Anker exakt an den Viewportrand,
   wo der Header sitzt, und die Ueberschrift verschwindet halb darunter. */
:target,
main > section[id],
#main{scroll-margin-top:calc(var(--header-h) - 0.75rem)}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
.skip{position:absolute;left:-9999px}
/* Fuer Text, der nur vorgelesen werden soll. clip-path statt display:none,
   damit Screenreader ihn ueberhaupt erreichen. */
.visually-hidden{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
.skip:focus{left:var(--pad);top:.5rem;z-index:200;background:var(--ink);color:#fff;padding:.6rem 1rem}
:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---- Header ---------------------------------------------------------- */
/* sticky, nicht fixed: reserviert seinen Platz im Fluss, dadurch kann kein
   Inhalt darunterlaufen. Deckender Grund, damit beim Scrollen nichts
   durchscheint. */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:var(--header-h);
}
.brand{display:flex;align-items:center;padding:.5rem 0}
.brand img{width:auto;height:40px;object-fit:contain}
.primary-nav{display:flex;gap:clamp(1rem,2.5vw,2.25rem)}
.primary-nav a{
  text-decoration:none;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
  padding:.5rem 0;transition:color .2s;
}
.primary-nav a:hover{color:var(--ink)}
.nav-toggle{display:none}

@media (max-width:767px){
  .nav-toggle{
    display:flex;align-items:center;gap:.5rem;
    min-height:44px;min-width:44px;padding:.5rem;
    background:none;border:0;color:var(--ink);
    font:inherit;font-size:.85rem;letter-spacing:.06em;
    text-transform:uppercase;cursor:pointer;
  }
  .nav-toggle-bar{
    width:22px;height:10px;border-top:1px solid currentColor;
    border-bottom:1px solid currentColor;
  }
  .primary-nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:.5rem var(--pad) 1.25rem;
  }
  .primary-nav[hidden]{display:none}
  .primary-nav a{padding:.85rem 0;border-top:1px solid var(--line)}
  .brand img{height:34px}
}

/* ---- Hero ------------------------------------------------------------ */
/* Ein Block, Text und Portraet nebeneinander, wie im Original. */
.hero{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5.5rem)}
.hero-grid{
  display:grid;gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  align-items:stretch;
}
.hero-body{display:flex;flex-direction:column}
.hero h1{
  font-size:clamp(1.875rem,3.4vw,2.75rem);
  letter-spacing:.005em;
  margin-bottom:2rem;
  max-width:24ch;
}
.hero-body p{color:var(--muted);max-width:56ch}
/* Rechtsbuendig und deutlich groesser als zuvor. Die Quelle ist nur 192x82 und
   wird auf 2x hochgerechnet ausgeliefert, damit die Darstellung nicht sichtbar
   vom Browser skaliert wird. */
.signature{
  width:clamp(190px,17vw,250px);height:auto;
  margin:auto 0 0 auto;
  padding-top:1.5rem;
  opacity:.9;
}
/* Das Portraet traegt die Hoehe des Textblocks. Die Quelle wird laenger als 3:4
   ausgeliefert, damit cover nichts Wesentliches abschneidet. */
.hero-media{display:flex}
.hero-media img{
  width:100%;height:100%;
  min-height:100%;
  object-fit:cover;object-position:center 18%;
}
.btn{
  display:inline-block;
  background:var(--ink);color:var(--paper);
  text-decoration:none;
  padding:.9rem 2rem;
  min-height:44px;
  font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;
  border:0;cursor:pointer;font-family:inherit;
  transition:transform .15s,opacity .2s;
}
.btn:hover{opacity:.88}
.btn:active{transform:translateY(1px)}
@media (max-width:899px){
  .hero-grid{grid-template-columns:1fr}
  .hero-media{max-width:420px}
  .hero-media img{height:auto;min-height:0}
  .hero h1{max-width:none}
  .signature{margin-inline:0 auto}
}

/* ---- Portfolio -------------------------------------------------------- */
/* Keine Kaesten und keine wiederholten Markennamen. Der Name steht im Logo
   und im alt-Attribut. Gegliedert wird ueber Weissraum. */
.portfolio h2,.services h2,.contact h2{
  font-size:clamp(1.75rem,3.4vw,2.5rem);
  margin-bottom:clamp(2rem,4vw,3.25rem);
}
.portfolio-grid{
  list-style:none;margin:0;padding:0;
  display:grid;
  gap:clamp(2rem,4vw,3.5rem) clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(4,1fr);
}
.portfolio-card{display:flex;flex-direction:column}
/* Alle Logos liegen in derselben Kachelgeometrie 560:320 und sind darin
   optisch nach Flaeche normalisiert. Dadurch sitzen sie zentriert, gleich
   hoch, und die Beschreibungen beginnen auf einer Linie. */
/* Der Link umschliesst nur das Logo und uebernimmt dessen Massgabe, damit
   sich am Raster nichts aendert. */
.brand-link{
  display:block;text-decoration:none;
  transition:opacity .2s;
}
.brand-link:hover{opacity:.65}
.portfolio-card .brand-link{width:100%;max-width:250px;margin:0 auto}
.marquee-track .brand-link{width:100%}
.brand-mark{
  width:100%;max-width:250px;
  aspect-ratio:560/240;
  object-fit:contain;
  margin:0 auto 1.25rem;
}
.portfolio-card p{
  color:var(--muted);font-size:.925rem;margin:0;max-width:none;
  text-wrap:pretty;
}
@media (max-width:1023px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:559px){.portfolio-grid{grid-template-columns:1fr}}

/* ---- Logoshow (Endlos-Karussell) -------------------------------------- */
/* Die Liste steht zweimal im Markup. Der Lauf verschiebt exakt eine
   Kopienbreite und springt dann zurueck, wodurch der Uebergang unsichtbar ist.
   Voraussetzung: der Abstand haengt an margin-right der Elemente, nicht an gap.
   Mit gap waeren es 11 Zwischenraeume bei 12 Elementen und -50% traefe nicht. */
.logoshow{
  border-block:1px solid var(--line);
  padding-block:clamp(1.75rem,3.5vw,2.75rem);
}
/* Die Spur liegt in .wrap und ist damit auf 1240px begrenzt. Vollflaechig
   waren bei 1920px 6.8 Kacheln gleichzeitig im Blick - bei nur 6 Marken
   stand dieselbe dann links und rechts zugleich. Mit der Begrenzung sind es
   auf jeder Breite hoechstens 4.6. */
.marquee{
  --item:clamp(130px,15vw,210px);
  --gap:clamp(2rem,5vw,4.5rem);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{
  list-style:none;margin:0;padding:0;
  display:flex;width:max-content;
  animation:ef-marquee 44s linear infinite;
}
.marquee-track li{flex:0 0 var(--item);margin-right:var(--gap)}
.marquee-track img{
  width:100%;height:auto;
  aspect-ratio:560/240;
  object-fit:contain;
  opacity:.72;
}
.marquee-track .brand-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.marquee:focus-within{overflow:visible}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes ef-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* Ohne Bewegungswunsch steht das Karussell still und wird stattdessen
   horizontal scrollbar, damit alle Marken erreichbar bleiben. */
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto}
  .marquee-track{animation:none}
}

/* ---- Services --------------------------------------------------------- */
/* Icon, Titel und Text zentriert, wie im Original. Trennlinie nur oben.
   Das Grid haelt die Grundlinien beider Spalten auf gleicher Hoehe. */
.service-list{
  margin:0;
  display:grid;gap:0 clamp(2rem,6vw,5rem);
  grid-template-columns:repeat(3,1fr);
}
.service{
  padding-block:clamp(1.75rem,3.5vw,2.5rem);
  border-top:1px solid var(--line);
  text-align:center;
}
.service-icon{
  width:34px;height:34px;
  display:block;margin:0 auto 1rem;
  color:var(--ink);
}
.service dt{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.5rem;line-height:1.2;margin-bottom:.4rem;
}
.service dd{margin:0 auto;color:var(--muted);font-size:.95rem;max-width:34ch}
@media (max-width:899px){.service-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:559px){.service-list{grid-template-columns:1fr}}

/* ---- Footer ---------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--line);
  padding-block:clamp(2.5rem,5vw,4rem);
  font-size:.95rem;color:var(--muted);
}
.footer-grid{
  display:grid;gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:repeat(3,1fr);
}
.footer-name{color:var(--ink);margin-bottom:.75rem;line-height:1.45}
.footer-name span{color:var(--muted)}
.site-footer address{font-style:normal}
.footer-cvr{margin-top:.75rem}
.footer-legal{display:flex;flex-direction:column;align-items:flex-start}
/* Blockelemente mit Innenabstand statt nackter Zeilen: die Links waren 17px
   hoch und damit unter jedem Touchziel-Mindestmass. */
.footer-contact{list-style:none;margin:0;padding:0}
/* Links im Footer muessen sich vom umgebenden Adresstext unterscheiden.
   Farbe allein reicht dafuer nicht (WCAG 1.4.1), deshalb zusaetzlich eine
   feine Unterlaengenlinie in --silver: sichtbar genug als Hinweis, ohne den
   zurueckhaltenden Ton zu brechen. Beim Ueberfahren zieht sie auf --ink an. */
.site-footer a{
  color:var(--ink);
  display:inline-flex;align-items:center;
  min-height:28px;
}
.footer-legal a{
  min-height:28px;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:var(--silver);
  transition:text-decoration-color .2s;
}
.footer-legal a:hover,
.footer-legal a:focus-visible{text-decoration-color:var(--ink)}

/* Kontaktzeilen tragen ein Icon. Unterstrichen wird nur der Text, sonst
   liefe die Linie unter dem Icon durch. */
.footer-contact a{gap:.55rem;text-decoration:none}
.footer-contact a span{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:var(--silver);
  transition:text-decoration-color .2s;
}
.footer-contact a:hover span,
.footer-contact a:focus-visible span{text-decoration-color:var(--ink)}
.footer-icon{
  width:15px;height:15px;flex:0 0 auto;
  color:var(--silver);
  transition:color .2s;
}
.footer-contact a:hover .footer-icon,
.footer-contact a:focus-visible .footer-icon{color:var(--ink)}

/* Auf Touchgeraeten auf 44px, dort zaehlt die Fingerkuppe. */
@media (pointer:coarse){
  .site-footer a,.footer-legal a{min-height:44px}
}
@media (max-width:767px){
  .footer-grid{grid-template-columns:1fr}
}

/* ---- Kontakt --------------------------------------------------------- */
.contact-inner{max-width:760px}
.contact-intro{color:var(--muted);margin-bottom:2.5rem}
.contact-form{display:grid;gap:1.25rem;grid-template-columns:repeat(2,1fr)}
.field{display:flex;flex-direction:column;gap:.4rem}
.field-wide{grid-column:1/-1}
.contact-form label{font-size:.85rem;letter-spacing:.04em;color:var(--ink)}
.req{color:var(--muted)}
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form textarea{
  font:inherit;font-size:1rem;
  color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:0;
  padding:.75rem .85rem;min-height:44px;width:100%;
}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--ink)}
.contact-form textarea{resize:vertical}
.consent label{display:flex;gap:.65rem;align-items:flex-start;font-size:.95rem;color:var(--muted)}
/* WCAG 2.5.8 verlangt mindestens 24x24 fuer Bedienelemente. */
.consent label{min-height:44px;padding-block:.35rem}
.consent input{margin-top:.3rem;width:24px;height:24px;flex:0 0 auto}
.err{margin:0;font-size:.85rem;color:#8A2B22}
.form-status{margin:.9rem 0 0;font-size:.95rem}
/* Offscreen statt display:none. Manche Bots ignorieren display:none-Felder
   gezielt und fuellen sie deshalb nicht aus. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:599px){.contact-form{grid-template-columns:1fr}}

/* ---- Rechtsseiten ---------------------------------------------------- */
.prose .wrap{max-width:820px}
.prose h1{font-size:clamp(2rem,4vw,2.75rem);margin-bottom:1.5rem}
.prose h2{font-size:1.5rem;margin:2.75rem 0 .75rem}
.prose h3{font-size:1.2rem;margin:1.75rem 0 .5rem}
.prose p,.prose li{color:var(--muted)}
.prose ul{color:var(--muted);padding-left:1.2rem}
.prose li{margin-bottom:.25rem}
.prose a{color:var(--ink)}

/* ---- Scroll-Reveal --------------------------------------------------- */
/* Motiviert durch Hierarchie: Sektionen erscheinen in Lesereihenfolge.
   Bewusst dezent. Die Klasse setzt JavaScript, damit ohne JS nichts
   dauerhaft unsichtbar bleibt. */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
  .reveal.is-in{opacity:1;transform:none}
}

/* ---- Rechtstext ------------------------------------------------------- */
/* Lesebreite deutlich schmaler als der Rest der Seite. Ein Rechtstext wird
   am Stueck gelesen, nicht ueberflogen; ueber 70 Zeichen pro Zeile verliert
   das Auge beim Ruecksprung die Zeile. */
.privacy-policy{max-width:68ch}
.privacy-policy h1{
  font-size:clamp(2rem,4vw,2.75rem);
  margin-bottom:.75rem;
}
/* Datumszeile direkt unter der Ueberschrift, zurueckgenommen. */
.privacy-policy h1 + p{
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
  color:var(--muted);font-size:.9rem;
}
.privacy-policy h1 + p strong{font-weight:400;letter-spacing:.02em}

/* Haarlinie ueber jedem Abschnitt: bei zwoelf nummerierten Kapiteln ist die
   Gliederung sonst nur ueber Abstaende ablesbar. */
.privacy-policy h2{
  font-size:clamp(1.375rem,2.4vw,1.75rem);
  margin:clamp(3rem,5vw,4rem) 0 1.25rem;
  padding-top:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid var(--line);
}
.privacy-policy h3{
  font-family:Geist,system-ui,sans-serif;
  font-size:.85rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
  margin:2.5rem 0 1rem;
}
.privacy-policy p{margin:0 0 1.15em;max-width:none}
.privacy-policy ul{
  margin:0 0 1.4em;padding:0;
  list-style:none;
}
.privacy-policy li{
  position:relative;
  padding-left:1.4em;margin-bottom:.5em;
  color:var(--muted);
}
/* Eigener Marker statt Systempunkt, damit er zur Haarlinienoptik passt. */
.privacy-policy li::before{
  content:"";position:absolute;
  left:0;top:.72em;
  width:.55em;height:1px;
  background:var(--silver);
}
.privacy-policy a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
  text-decoration-color:var(--silver);
  transition:text-decoration-color .2s;
}
.privacy-policy a:hover,
.privacy-policy a:focus-visible{text-decoration-color:var(--ink)}

/* Anschriftenbloecke: erkennbar an <strong> plus <br> in derselben Zeile.
   Die Datumszeile hat kein <br>, der Hinweis "one hour" kein <strong> am
   Absatzanfang, beide werden also nicht erfasst. */
.privacy-policy p:has(strong):has(br){
  padding-left:1.25rem;
  border-left:2px solid var(--line);
  color:var(--muted);
  line-height:1.65;
}
.privacy-policy p:has(strong):has(br) strong{
  color:var(--ink);font-weight:500;
}