@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 600;font-display:swap;src:url(../fonts/cormorant-garamond-italic-300_600-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 600;font-display:swap;src:url(../fonts/cormorant-garamond-italic-300_600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/cormorant-garamond-300_600-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/cormorant-garamond-300_600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/jost-300_600-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/jost-300_600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* White Label Associates: Website (Entwurf 5 "Minimal Luxury", gewaehlt 09.11.2026). Erzeugt von
   .claude-workshop/__kunden/_whitelabel.associates/website/make_website.py, danach im CMS2 gepflegt. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--grund);color:var(--tinte);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.18em}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3,h4{text-wrap:balance;overflow-wrap:break-word}
p,li,dd{overflow-wrap:break-word;hyphens:auto}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--tinte);color:var(--grund)}
:focus-visible{outline:3px solid var(--fokus,currentColor);outline-offset:3px}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tag{white-space:nowrap;hyphens:manual}
.satz,.unter,.unten p,a{hyphens:manual}
.farbknopf{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.farbknopf:active{transform:scale(.94)}
/* Wortmarke ist ein PNG schwarz auf weiss: hell multiplizieren, dunkel invertieren und aufhellen */
.wortmarke{mix-blend-mode:var(--logomix,multiply);filter:var(--logofilter,none)}
:root{--grund:#fff;--tinte:#141414;--leise:#57534d;--akzent:#6f675d;--sand:#eeebe6;--feld:#e6e2dc;--linie:#e2dfda;--strich:#141414;--nacht:#121212;--nachttext:#f4f2ee;--nachtleise:#b4afa7;--nachtlinie:#2e2d2b;--fokus:#141414;--marke:none;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--grund:#131211;--tinte:#f1eee9;--leise:#b3ada4;--akzent:#c4b9aa;--sand:#1e1c1a;--feld:#262421;--linie:#2c2a27;--strich:#f1eee9;--nacht:#0a0a09;--nachttext:#f4f2ee;--nachtleise:#a9a49c;--nachtlinie:#2a2927;--fokus:#f1eee9;--marke:invert(1);color-scheme:dark}}
:root[data-theme="dark"]{--grund:#131211;--tinte:#f1eee9;--leise:#b3ada4;--akzent:#c4b9aa;--sand:#1e1c1a;--feld:#262421;--linie:#2c2a27;--strich:#f1eee9;--nacht:#0a0a09;--nachttext:#f4f2ee;--nachtleise:#a9a49c;--nachtlinie:#2a2927;--fokus:#f1eee9;--marke:invert(1);color-scheme:dark}
:root{--aus:cubic-bezier(.23,1,.32,1);--rand:clamp(20px,8.3vw,150px);--serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost',system-ui,sans-serif}
body{font:400 17px/1.65 var(--sans);font-weight:350}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
em,.kursiv{font-style:italic}
.etikett{font:500 12px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--leise);hyphens:manual}
.innen{padding-inline:var(--rand)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:10;background:var(--grund);border-bottom:1px solid var(--linie)}
.kopf .innen{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.wort{display:inline-flex;align-items:center;gap:14px;text-decoration:none;white-space:nowrap}
.wort b{font:400 16px/1 var(--sans);letter-spacing:.34em}
.wort i{font:400 9.5px/1 var(--sans);font-style:normal;letter-spacing:.36em;color:var(--leise);padding-left:14px;border-left:1px solid var(--leise);height:20px;display:inline-flex;align-items:center}
.rechts{display:flex;align-items:center;gap:8px}
#menue ul{display:flex;gap:6px}
#menue a{display:flex;align-items:center;min-height:44px;padding:0 12px;font:500 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;position:relative}
#menue a::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 240ms var(--aus)}
#menue a.handlung::after{transform:none}
@media (hover:hover){#menue a:hover::after{transform:none}}
.sprachen{display:flex;align-items:center;font:500 12px/1 var(--sans);letter-spacing:.14em}
.sprachen a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:44px;text-decoration:none;color:var(--leise);transition:color 200ms ease}
.sprachen a.active{color:var(--tinte)}
@media (hover:hover){.sprachen a:hover{color:var(--tinte)}}
.sprachen .sep{color:var(--linie)}
.menueknopf{display:none;width:44px;height:44px;place-items:center}
.menueknopf span,.menueknopf span::before,.menueknopf span::after{display:block;width:22px;height:1px;background:currentColor;position:relative}
.menueknopf span::before,.menueknopf span::after{content:"";position:absolute;left:0}
.menueknopf span::before{top:-7px}.menueknopf span::after{top:7px}

/* Hero */
.hero{padding-block:clamp(72px,10vw,150px) clamp(56px,6vw,90px)}
.hero h1{font-size:clamp(46px,7.4vw,118px);line-height:.98;margin-top:clamp(28px,3vw,44px);animation:auf 1100ms var(--aus) both}
.hero h1 em{color:var(--akzent)}
.hero h1 span{display:block;white-space:nowrap}
@media (max-width:640px){.hero h1 span{white-space:normal}}
.hero .etikett{animation:auf 900ms var(--aus) both}
.hero-fuss{display:flex;justify-content:space-between;align-items:flex-end;gap:28px 40px;flex-wrap:wrap;margin-top:clamp(36px,3.6vw,56px);animation:auf 1100ms 140ms var(--aus) both}
.hero-fuss p{font-size:clamp(17px,1.4vw,20px);max-width:36ch;color:var(--leise)}
@keyframes auf{from{opacity:0;transform:translateY(16px)}}
.knopf{display:inline-flex;align-items:center;gap:18px;min-height:52px;padding:0 26px;border:1px solid var(--strich);font:500 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color 220ms ease,color 220ms ease,transform 160ms var(--aus)}
.knopf svg{transition:transform 240ms var(--aus)}
@media (hover:hover){.knopf:hover{background:var(--tinte);color:var(--grund)}.knopf:hover svg{transform:translateX(4px)}}
.knopf:active{transform:scale(.97)}

/* Bild */
.bild{padding-inline:clamp(12px,2.2vw,32px)}
.bild figure{overflow:hidden;background:var(--feld);aspect-ratio:2.45/1}
.bild img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;filter:grayscale(1) brightness(1.45) contrast(.9);transition:transform 1200ms var(--aus)}
@media (hover:hover){.bild figure:hover img{transform:scale(1.02)}}

/* Studio */
.studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:28px var(--rand);padding-block:clamp(88px,10vw,150px)}
.studio .gross{font-family:var(--serif);font-size:clamp(26px,2.6vw,40px);line-height:1.28;hyphens:manual}
.studio .klein{margin-top:28px;color:var(--leise);max-width:52ch}

/* Leistungen */
.leistung{border-top:1px solid var(--linie);padding-block:clamp(88px,9vw,140px)}
.kopfzeile{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:clamp(48px,5vw,72px)}
.kopfzeile h2{font-size:clamp(44px,5vw,76px);line-height:1}
.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px clamp(24px,3.4vw,48px)}
.drei article{border-top:1px solid var(--strich);padding-top:30px}
.nr{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--leise)}
.drei h3{font-size:clamp(28px,2.4vw,36px);line-height:1.1;margin-top:18px}
.drei p{color:var(--leise);margin-top:18px}
.punkte{margin-top:26px}
.punkte li{padding:11px 0;border-bottom:1px solid var(--linie);font-size:16px}
.beleg{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.4;color:var(--leise);margin-top:24px;hyphens:manual}

/* Referenzen: Logos in einer Reihe mit Haarlinien (wie 6), Namen zweispaltig (wie 7), kleiner */
.arbeit{background:var(--nacht);color:var(--nachttext);padding-block:clamp(72px,7vw,110px)}
.arbeit .etikett{color:var(--nachtleise)}
.arbeit .kopfzeile{margin-bottom:clamp(32px,3vw,44px)}
.arbeit .kopfzeile h2{font-size:clamp(36px,3.6vw,54px)}
.marken{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-block:1px solid var(--nachtlinie)}
.marken li{display:grid;place-items:center;min-height:clamp(110px,9vw,140px);padding:20px 12px;border-left:1px solid var(--nachtlinie)}
.marken li:first-child{border-left:0}
.marken img{height:auto;max-height:clamp(54px,5vw,78px);width:auto;max-width:100%;filter:invert(1);opacity:.88;transition:opacity 240ms ease,transform 400ms var(--aus)}
.marken img.breit{height:auto;max-height:clamp(36px,3.2vw,50px)}
@media (hover:hover){.marken li:hover img{opacity:1;transform:scale(1.04)}}
.liste{columns:2;column-gap:clamp(28px,4vw,64px);margin-top:clamp(28px,2.8vw,40px)}
.liste li{break-inside:avoid;display:flex;justify-content:space-between;align-items:baseline;gap:4px 20px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--nachtlinie)}
.liste h3{font-size:19px;line-height:1.25}
.liste .etikett{font-size:10.5px;letter-spacing:.16em;text-align:right}

/* Gruenderin */
.gruenderin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px clamp(40px,8vw,150px);padding-block:clamp(88px,10vw,150px)}
.gruenderin figure{align-self:start;overflow:hidden;background:var(--feld)}
.gruenderin figure img{width:100%;height:auto;transition:transform 1200ms var(--aus)}
@media (hover:hover){.gruenderin figure:hover img{transform:scale(1.02)}}
.gruenderin h2{font-size:clamp(48px,5vw,80px);line-height:1;margin-top:22px}
.gruenderin .bio{margin-top:26px;color:var(--leise)}
.gruenderin blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2vw,28px);line-height:1.4;margin-top:32px;hyphens:manual}
.laufbahn{margin-top:36px;border-top:1px solid var(--strich)}
.laufbahn li{display:grid;grid-template-columns:11.5em minmax(0,1fr) auto;gap:4px 20px;padding:15px 0;border-bottom:1px solid var(--linie);font-size:16px}
.laufbahn b{font-weight:500}
.laufbahn span{color:var(--leise)}
.laufbahn time{color:var(--leise);white-space:nowrap;text-align:right;justify-self:end}
.preise{margin-top:24px;font-size:14px;letter-spacing:.03em;color:var(--leise)}

/* Kontakt: hier endete das PDF, ergaenzt im selben Stil */
.kontakt{background:var(--sand);padding-block:clamp(88px,10vw,150px);text-align:center}
.kontakt h2{font-size:clamp(46px,6.4vw,104px);line-height:1;margin:26px auto 0;max-width:11em}
.kontakt h2 em{color:var(--akzent)}
.kontakt .unter{margin:26px auto 0;max-width:46ch;color:var(--leise);font-size:clamp(17px,1.3vw,19px)}
.kontakt .knopf{margin-top:40px}
.wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:clamp(64px,6vw,96px);padding-top:40px;border-top:1px solid var(--strich);text-align:left}
.wege dt{font:500 12px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--leise)}
.wege dd{font-family:var(--serif);font-size:clamp(22px,1.9vw,28px);line-height:1.3;margin-top:12px}
.wege a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 300ms var(--aus)}
@media (hover:hover){.wege a:hover{background-size:100% 1px}}

/* Fuss */
.fuss{border-top:1px solid var(--linie);padding-block:56px 40px}
.fuss-oben{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.fuss nav ul{display:flex;flex-wrap:wrap;gap:0 4px}
.fuss nav a{display:flex;align-items:center;min-height:44px;padding:0 10px;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.fuss-unten{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1px solid var(--linie);font-size:14px;color:var(--leise)}
.fuss-unten ul{display:flex;flex-wrap:wrap;gap:0 18px}
.fuss-unten a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
@media (hover:hover){.fuss-unten a:hover{color:var(--tinte)}}

@media (max-width:1180px){.laufbahn li{grid-template-columns:10em minmax(0,1fr) auto}}
@media (max-width:980px){
  .laufbahn li{grid-template-columns:11.5em minmax(0,1fr) auto}
  .drei{grid-template-columns:minmax(0,1fr)}
  .gruenderin{grid-template-columns:minmax(0,1fr)}
  .gruenderin figure{max-width:520px}
  .marken{grid-template-columns:repeat(4,minmax(0,1fr))}
  .marken li:nth-child(5){border-left:0}
  .marken li:nth-child(n+5){border-top:1px solid var(--nachtlinie)}
  .liste{columns:1}
}
@media (max-width:860px){
  .menueknopf{display:grid}
  #menue{position:fixed;inset:73px 0 auto;background:var(--grund);border-bottom:1px solid var(--linie);padding:12px var(--rand) 24px;display:none}
  #menue.offen{display:block}
  #menue ul{flex-direction:column}
  #menue a{font-size:15px;min-height:52px;padding:0}
  #menue a::after{left:0;right:auto;width:40px}
  .studio{grid-template-columns:minmax(0,1fr)}
  .bild figure{aspect-ratio:4/3}
}
@media (max-width:640px){
  .wort i{display:none}
  .wort b{font-size:14px;letter-spacing:.22em}
  .rechts{gap:0}
  .sprachen a{min-width:26px}
  .sprachen .sep{display:none}
  .kopfzeile{flex-direction:column;gap:14px}
  .liste li{flex-direction:column;gap:4px}
  .liste .etikett{text-align:left}
  .marken{grid-template-columns:repeat(2,minmax(0,1fr))}
  .marken li{border-left:0;border-top:1px solid var(--nachtlinie)}
  .marken li:nth-child(even){border-left:1px solid var(--nachtlinie)}
  .marken li:nth-child(n+3){border-top:1px solid var(--nachtlinie)}
  .marken li:nth-child(-n+2){border-top:0}
  .marken li:last-child{grid-column:1/-1;border-left:0}
  .laufbahn li{grid-template-columns:minmax(0,1fr) auto}
  .laufbahn span{grid-column:1/-1;grid-row:2}
  .wege{grid-template-columns:minmax(0,1fr)}
  .hero-fuss .knopf,.kontakt .knopf{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.hero h1,.hero .etikett,.hero-fuss{animation:none}}

/* Rechtsseiten */
.recht{padding-block:clamp(72px,9vw,140px)}
.recht h1{font-size:clamp(44px,5.6vw,88px);line-height:1}
.recht-text{max-width:44rem;margin-top:clamp(36px,4vw,56px)}
.recht-text h2{font-size:clamp(24px,2vw,30px);line-height:1.2;margin-top:36px}
.recht-text p{margin-top:14px;color:var(--leise)}
.recht-text p b{color:var(--tinte);font-weight:500}
.recht-text a{overflow-wrap:anywhere}
.recht-text .klein{font-size:14px;margin-top:40px}

/* CMS2-Groessenstufen je Kasten (design.json "groessen"); Werte gehoeren der Site.
   Block: Breite ueber max-width. Raster: Spannweite in Spalten. Reihe (flex): Anteil. Raster selbst: Spaltenzahl. */
.cms2-b-s { max-width: 40rem; margin-inline: auto; }
.cms2-b-m { max-width: 60rem; margin-inline: auto; }
.cms2-b-v { max-width: none; width: 100%; }
.cms2-sp-2 { grid-column: span 2; }
.cms2-sp-3 { grid-column: span 3; }
.cms2-sp-voll { grid-column: 1 / -1; }
.cms2-f-25 { flex: 0 1 25%; }
.cms2-f-33 { flex: 0 1 33.333%; }
.cms2-f-50 { flex: 0 1 50%; }
.cms2-f-66 { flex: 0 1 66.666%; }
.cms2-f-75 { flex: 0 1 75%; }
.cms2-f-100 { flex: 0 0 100%; }
.cms2-g-1 { grid-template-columns: minmax(0, 1fr) !important; }
.cms2-g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.cms2-g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.cms2-g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.cms2-h-s { min-height: 12rem; }
.cms2-h-m { min-height: 24rem; }
.cms2-h-l { min-height: 40rem; }
@media (max-width: 640px) {
  .cms2-b-s, .cms2-b-m { max-width: none; }
  .cms2-sp-2, .cms2-sp-3 { grid-column: 1 / -1; }
  .cms2-f-25, .cms2-f-33, .cms2-f-50, .cms2-f-66, .cms2-f-75 { flex-basis: 100%; }
  .cms2-g-3, .cms2-g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cms2-h-m { min-height: 16rem; }
  .cms2-h-l { min-height: 24rem; }
}