@font-face{font-family:Montserrat;src:url(montserrat-regular.woff) format('woff');font-weight:400;font-display:swap}*{box-sizing:border-box}body{margin:0;background:#fff;color:#111;font-family:Montserrat,Arial,sans-serif}main{max-width:1136px;margin:0 auto;padding:clamp(70px,11vh,130px) 48px 90px}h1{margin:0 0 58px;font-size:clamp(17px,2.05vw,25px);font-weight:400;letter-spacing:.19em;line-height:1.9;text-transform:uppercase}.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.card{display:flex;align-items:center;justify-content:center;aspect-ratio:1;width:100%;padding:0;border:0;border-radius:0;background:transparent;overflow:hidden;cursor:pointer;transition:opacity .2s,transform .2s}.card-image{width:100%;height:100%;object-fit:contain;padding:0;display:block;mix-blend-mode:multiply}.card:hover{opacity:.86;transform:translateY(-3px)}.card:focus-visible{outline:2px solid #111;outline-offset:6px}dialog{width:min(420px,calc(100% - 40px));padding:44px 36px 34px;border:0;color:#111;box-shadow:0 15px 90px #0002}dialog::backdrop{background:#ffffffbf;backdrop-filter:blur(6px)}form{position:relative}h2{margin:0 0 30px;font-size:16px;font-weight:400;letter-spacing:.15em;text-transform:uppercase}.close{position:absolute;right:-18px;top:-30px;background:none;border:0;font-size:28px;font-weight:400;cursor:pointer;color:#666}label{display:block;font-size:12px;letter-spacing:.06em;margin-bottom:10px}input[type=password]{width:100%;border:1px solid #ccc;padding:13px;font:inherit;font-size:16px;border-radius:0}input:focus{outline:1px solid #111}#error{font-size:12px;line-height:1.6;min-height:20px;margin:10px 0 18px}.submit{width:100%;border:0;background:#111;color:#fff;padding:15px 18px;font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;display:flex;justify-content:space-between}.submit:disabled{opacity:.5}@media(max-width:640px){main{padding:65px 25px 55px}h1{font-size:16px;letter-spacing:.12em;line-height:1.9;margin-bottom:36px}.projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}@media(prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}

.card{position:relative}.unlock-label{position:absolute;left:0;right:0;bottom:14px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#444}

/* Siteworker Wortmarke – Illustrator-Originalpfade unverändert */
.brand{margin:0 0 clamp(42px,6vw,78px)}.brand img{display:block;width:clamp(235px,32vw,390px);height:auto;max-width:100%}@media(max-width:640px){.brand{margin-bottom:44px}.brand img{width:min(290px,90%)}}

/* Logo und Leistungszeilen */
.brand{margin-bottom:clamp(46px,6vw,76px)}
.brand img{width:clamp(235px,34vw,430px)}
.brand-claim{margin:16px 0 0;max-width:430px;text-align:center;font-size:clamp(9px,1.1vw,12px);font-weight:400;letter-spacing:.26em;line-height:1.9;color:#555;white-space:nowrap}
.brand-claim span{padding:0 .7em;color:#888}
@media(max-width:640px){
 .brand{margin-bottom:43px}
 .brand img{width:min(290px,100%)}
 .brand-claim{max-width:290px;font-size:8px;letter-spacing:.15em;margin-top:12px}
 .brand-claim span{padding:0 .45em}
}

/* Feinabstimmung: einzeilige Leistungsbeschreibung, dezente Projektüberschrift */
.brand{margin-bottom:38px}
.brand-claim{max-width:430px;font-size:10px;letter-spacing:.12em;line-height:1.7;margin-top:14px;white-space:normal}
.brand-claim span{padding:0 .5em}
h1{font-size:clamp(16px,1.55vw,20px);letter-spacing:.015em;line-height:1.55;text-transform:none;margin-bottom:38px;color:#444}
@media(max-width:640px){
 .brand{margin-bottom:32px}
 .brand-claim{max-width:290px;font-size:9px;letter-spacing:.04em;line-height:1.7}
 .brand-claim span{padding:0 .25em}
 h1{font-size:15px;letter-spacing:0;line-height:1.55;margin-bottom:28px}
}
/* Leistungszeile optisch auf Wortmarkenbreite abgestimmt */
.brand-claim{width:clamp(235px,34vw,430px);max-width:100%;font-size:clamp(10px,1.05vw,13px);letter-spacing:.18em;white-space:nowrap;text-align:center}
@media(max-width:640px){.brand-claim{width:min(290px,100%);font-size:clamp(7px,2.1vw,9px);letter-spacing:.055em;white-space:nowrap}}

/* Leistungszeile vergroessert – Desktop und Mobil */
.brand-claim{font-size:clamp(12px,1.25vw,16px);letter-spacing:.025em;line-height:1.5;white-space:nowrap;margin-top:13px}
.brand-claim span{padding:0 .22em}
@media(max-width:640px){.brand-claim{font-size:clamp(8px,2.35vw,11px);letter-spacing:0;white-space:normal;line-height:1.6}.brand-claim span{padding:0 .12em}}

/* Gleiche vertikale Abstaende: Unterzeile -> Titel -> Projektkacheln */
.brand{margin-bottom:48px}
h1{margin-bottom:48px}
@media(max-width:640px){.brand{margin-bottom:30px}h1{margin-bottom:30px}}

/* Optischer Ausgleich der sichtbaren Abstaende */
.brand{margin-bottom:42px}
h1{margin-bottom:48px}
@media(max-width:640px){.brand{margin-bottom:27px}h1{margin-bottom:30px}}

/* Mobile: Leistungszeile groesser, naeher am Logo und auf dessen Breite */
@media(max-width:640px){
 .brand-claim{box-sizing:border-box;width:min(290px,100%);max-width:100%;font-size:clamp(10px,2.95vw,12px);letter-spacing:.012em;white-space:nowrap;margin-top:5px;line-height:1.35;text-align:center;}
 .brand-claim span{padding:0 .12em;}
}

/* Proportional skalierendes SVG-Duo: identische Containerbreite */
.brand{width:clamp(235px,34vw,430px);max-width:100%;margin-bottom:42px}
.brand > img:first-child{display:block;width:100%;height:auto;max-width:none}
.brand > .brand-claim-svg{display:block;width:100%;height:auto;max-width:none;margin-top:4px}
@media(max-width:640px){.brand{width:min(100%,430px);margin-bottom:27px}.brand > img:first-child,.brand > .brand-claim-svg{width:100%}.brand > .brand-claim-svg{margin-top:3px}}

/* Mobile Feinabstimmung: Titel einzeilig und Abstand unter dem Logo */
.brand > .brand-claim-svg{margin-top:8px}
@media(max-width:640px){
 .brand > .brand-claim-svg{margin-top:7px}
 h1{font-size:clamp(8px,2.45vw,12px);line-height:1.35;letter-spacing:0;white-space:nowrap;max-width:100%;margin-bottom:30px}
}

/* Oktober 2026: Header-Abstaende und responsive Wortmarke */
main{padding-top:clamp(38px,6vh,72px)}
.brand > .brand-claim-svg{margin-top:12px}
@media(max-width:640px){
  main{padding-top:32px}
  .brand{width:85%;max-width:100%;margin-bottom:27px}
  .brand > img:first-child,.brand > .brand-claim-svg{width:100%;height:auto}
  .brand > .brand-claim-svg{margin-top:11px}
  h1{font-size:clamp(15px,4vw,19px);line-height:1.55;white-space:normal;letter-spacing:0;margin-bottom:30px}
  h1 .title-name{display:block}
}

/* iPhone: Unterzeile optisch auf die volle Wortmarkenbreite ziehen */
@media (max-width:640px){
  .brand > .brand-claim-svg{
    width:106%;
    max-width:none;
    margin-left:-3%;
  }
}

/* Exakte Breitenkopplung von Wortmarke und Leistungszeile */
.brand > img:first-child,
.brand > .brand-claim-svg {
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
}
@media (max-width:640px) {
  .brand > .brand-claim-svg {
    width:100%;
    margin-left:0;
    margin-right:0;
  }
}

/* Sichtbare Breite statt nur SVG-Containerbreite: 6 % optische Korrektur.
   Referenz: Logo ca. 888 px, Unterzeile ca. 840 px (Screenshot). */
.brand{overflow:visible}
.brand > .brand-claim-svg{width:106% !important;max-width:none !important;margin-left:-3% !important;margin-right:0 !important}

/* Neues, vollständiges Illustrator-Logo inklusive Unterzeile.
   Frühere Claim-Skalierungen werden nicht mehr verwendet. */
.brand { overflow:visible; }
.brand > img:first-child {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0;
}