/* Schriften: Dateien aus wp-content/uploads/2022/08/ nach /fonts kopieren.
   Ohne Dateien greifen die Fallback-Schriften. */
@font-face{font-family:"ArialNovaLight";font-display:swap;
  src:url("fonts/ArialNova-Light.woff2") format("woff2"),url("fonts/ArialNova-Light.woff") format("woff")}
@font-face{font-family:"Blair ITC";font-display:swap;
  src:url("fonts/BlairITC.woff2") format("woff2"),url("fonts/BlairITC.woff") format("woff")}

:root{
  --text:#393939; --nav:#383838; --bg:#fff; --placeholder:#eee;
  --rot:#bf7574; --gelb:#d2ce93; --blau:#81a9da;
  --body-font:"ArialNovaLight","Arial Nova Light","Arial Nova",Arial,Helvetica,sans-serif;
  --head-font:"Blair ITC",Verdana,"DejaVu Sans",sans-serif; /* breite Grotesk, Letter-Spacing siehe unten */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body-font);font-size:20px;line-height:28px}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.container{width:100%;max-width:1170px;margin:0 auto;padding:0 15px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;padding:50px 0 78px;transition:padding .25s}
.site-header.is-scrolled{padding:20px 0}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:block;width:453px;max-width:100%}
.logo img{display:block;width:100%;height:auto}
.main-nav{margin-left:auto;max-width:620px}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 28px;text-align:right}
.main-nav a{font-family:var(--head-font);font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--nav);padding:6px 0;border-bottom:1px solid transparent}
.main-nav a:hover,.main-nav a[aria-current="page"]{border-bottom-color:#3e79be}
.menu-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.menu-toggle span{display:block;width:28px;height:2px;background:#333;margin:6px 0;transition:transform .25s,opacity .25s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Kachel-Raster */
h1{font-family:var(--head-font);font-size:38px;line-height:60px;font-weight:600;text-transform:uppercase;color:var(--text);margin:0 0 26px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:27px;margin:0 0 150px;padding:0;list-style:none}
.tile{position:relative;display:block;aspect-ratio:655/545;background:var(--placeholder);overflow:hidden}
.tile .bg{position:absolute;inset:0;background:center/cover no-repeat;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tile .hover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:5px;text-align:center;
  opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s}
.tile:hover .hover,.tile:focus-visible .hover{opacity:1;transform:none}
.tile h2{margin:0;font-family:var(--head-font);font-size:26px;line-height:32px;font-weight:normal;text-transform:uppercase;color:#fff}
.tiles li:nth-child(1) .hover,.tiles li:nth-child(6) .hover{background:var(--rot)}
.tiles li:nth-child(2) .hover,.tiles li:nth-child(4) .hover{background:var(--gelb)}
.tiles li:nth-child(3) .hover,.tiles li:nth-child(5) .hover{background:var(--blau)}
@media (hover:none){ /* Touch: Titel dauerhaft sichtbar */
  .tile .hover{opacity:1;transform:none;background:rgba(0,0,0,.28)!important;align-items:flex-end;justify-content:flex-start;text-align:left;padding:14px}
  .tile h2{font-size:20px}
}

/* Footer */
.site-footer{text-align:right;padding:0 0 40px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{display:inline;margin-left:48px}
.site-footer a{font-family:var(--head-font);font-size:17px;letter-spacing:.06em;text-transform:uppercase}
.site-footer a:hover{text-decoration:underline}

@media (max-width:992px){
  .site-header{padding:25px 0 39px}
  .tile h2{font-size:18px}
}
@media (max-width:768px){
  body{font-size:18px}
  .site-header{padding:16px 0 26px}
  .logo{width:min(453px,78%)}
  .menu-toggle{display:block}
  .main-nav{position:fixed;inset:0 0 0 auto;width:min(320px,85%);background:#fff;padding:90px 28px 28px;
    box-shadow:-8px 0 24px rgba(0,0,0,.12);transform:translateX(100%);visibility:hidden;transition:transform .3s,visibility .3s;z-index:60}
  .main-nav.is-open{transform:none;visibility:visible}
  .main-nav ul{flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;gap:0;text-align:left}
  .main-nav a{display:block;font-size:20px;padding:20px 0;border:0}
  .menu-toggle{position:relative;z-index:70}
  h1{font-size:32px;line-height:48px}
  .tiles{grid-template-columns:repeat(2,1fr);gap:12px}
  .site-footer{text-align:left}
  .site-footer li{margin:0 32px 0 0}
}
@media (max-width:480px){
  .tiles{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* Unterseiten */
main.page{padding-bottom:60px}
.page h1.page-title{font-family:var(--head-font);font-size:38px;line-height:60px;font-weight:600;text-transform:uppercase;margin:0 0 26px}
.philosophie-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch}
.philosophie{background:var(--rot);display:flex;flex-direction:column;justify-content:center;padding:30px 20px 30px 9.5%;font-family:var(--body-font)}
.philosophie p{margin:0 0 12px;font-family:var(--body-font);font-size:25px;line-height:28px;font-weight:400;color:#fff}
.philosophie h2{margin:0;font-family:var(--body-font);font-size:38px;line-height:44px;font-weight:400;color:#fff}
.philosophie-foto{margin:0}
.philosophie-foto img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;background:var(--placeholder)}
.spezial{padding-top:68px}
.page h1.spezial-title{font-family:var(--head-font);font-weight:600;color:var(--text);text-transform:none;text-align:center;margin:0 0 36px}
.spezial-intro{margin:0 0 46px;padding:0 10%;text-align:center;font-size:22px;line-height:36px}
.spezial-liste{margin:0;padding:0 16%;text-align:center;font-size:22px;line-height:32px}
@media (max-width:768px){
  .philosophie-row{grid-template-columns:1fr}
  .philosophie{margin:0;min-height:360px;padding-left:7%}
  .philosophie-row{gap:20px}
  .spezial{padding-top:40px}
  .page h1.page-title,.page h1.spezial-title{font-size:32px;line-height:48px}
  .spezial-intro,.spezial-liste{padding:0;font-size:18px;line-height:28px}
}


/* Referenzen */
.ref-list{margin-top:30px}
.ref-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;margin-bottom:50px}
.ref-row:last-child{margin-bottom:0}
.ref-pic{margin:0}
.ref-pic img{display:block;width:100%;height:auto;aspect-ratio:1024/703;object-fit:cover;background:var(--placeholder)}
.ref-text h2{margin:0 0 26px;font-size:24px;line-height:32px;font-weight:400}
.ref-text h2:last-child{margin-bottom:0}
.ref-text p{margin:0 0 10px;font-size:18px;line-height:24px}
.ref-text p:last-child{margin-bottom:0}
.ref-text a{color:#3e79be}
.ref-text a:hover{text-decoration:underline}
.ref-row.odd .ref-text{padding-right:20px}
.ref-row.even .ref-text{padding-left:40px}
@media (max-width:768px){
  .ref-row{grid-template-columns:1fr;margin-bottom:35px}
  .ref-pic{order:1}
  .ref-text{order:2;padding:20px 0 0!important}
}

/* Team */
.team-intro p{margin:0 0 15px;font-size:18px;line-height:24px}
.team-intro ul{margin:0 0 0;padding-left:18px;font-size:18px;line-height:24px}
.team-intro li{margin:0 0 8px}
.person{margin-top:64px}
.person h3{margin:0 0 22px;font-family:var(--body-font);font-size:20px;line-height:27px;font-weight:400;text-transform:uppercase;color:var(--text)}
.person h2{margin:0 0 26px;font-size:20px;line-height:27px;font-weight:400}
.person p{margin:0 0 10px;font-size:20px;line-height:28px}
.person a,.kontakt a{color:#3e79be}
.person a:hover,.kontakt a:hover{text-decoration:underline}

/* Kontakt */
.kontakt p{margin:0 0 8px;font-size:18px;line-height:26px}
.kontakt-form{margin:46px 0 0}
.kontakt-form .zeile{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:26px}
.kontakt-form input,.kontakt-form textarea{width:100%;border:0;border-bottom:1px solid #3e79be;border-radius:0;background:transparent;
  font:inherit;font-size:18px;line-height:26px;color:var(--text);padding:4px 0}
.kontakt-form input::placeholder,.kontakt-form textarea::placeholder{color:var(--text);opacity:1}
.kontakt-form textarea{height:150px;resize:vertical;display:block;margin-bottom:22px}
.kontakt-form button{display:block;margin-left:auto;background:#3e79be;color:#fff;border:0;padding:10px 20px;font:inherit;font-size:16px;cursor:pointer}
.kontakt-form button:hover{background:#2f65a5}
.kontakt-form input:focus-visible,.kontakt-form textarea:focus-visible{outline:2px solid #3e79be;outline-offset:2px}
.kontakt-hinweis{margin-top:26px!important}
.kontakt hr{border:0;border-top:3px solid #b5b5b5;margin:46px 0 36px}
.kontakt address{font-style:normal;font-size:18px;line-height:24px;margin:0 0 20px}
.kontakt-karte{margin:40px 0 0}
.kontakt-karte img{display:block;width:100%;height:auto;aspect-ratio:1140/768;background:var(--placeholder)}
.kontakt-karte figcaption{margin-top:14px;font-size:16px;line-height:22px}
@media (max-width:768px){
  .team-intro p,.team-intro ul,.person p{font-size:18px;line-height:26px}
  .person{margin-top:44px}
  .kontakt-form .zeile{grid-template-columns:1fr;gap:18px}
}
.kontakt-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kontakt-status{margin:18px 0 0;padding:10px 14px;font-size:18px;line-height:26px;border-left:4px solid #3e79be;background:#f4f7fb}
.kontakt-status.fehler{border-left-color:#bf7574;background:#faf3f3}
.kontakt-form button:disabled{opacity:.6;cursor:wait}

/* Impressum / Datenschutz */
.legal p{margin:0 0 26px;font-size:20px;line-height:28px}
.legal h2{margin:46px 0 22px;font-size:24px;line-height:32px;font-weight:400;scroll-margin-top:90px}
.legal h3{margin:30px 0 12px;font-family:Arial,Helvetica,sans-serif;font-size:20px;line-height:27px;font-weight:700;color:var(--text)}
.legal ul,.legal ol{margin:0 0 26px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal a{color:#3e79be;overflow-wrap:anywhere}
.legal a:hover{text-decoration:underline}
.legal strong{font-weight:700}
.legal .page-title{hyphens:auto;overflow-wrap:break-word}
.legal.lang p,.legal.lang li{font-size:18px;line-height:26px}
.legal.lang p{margin-bottom:20px}
.legal .toc{margin:0 0 20px}
.legal .toc h3{margin-top:0}
.legal .toc ol{columns:2;column-gap:40px;list-style:decimal}
.legal .toc li{break-inside:avoid}
@media (max-width:768px){
  .legal p{font-size:18px;line-height:26px}
  .legal .toc ol{columns:1}
}

/* Verkauf und Vermietung */
.angebot-intro{margin:0 0 38px;font-size:20px;line-height:28px}
.angebot-intro a{color:#3e79be}
.angebote{margin-top:0}
.angebote .ref-row{margin-bottom:56px}
.angebote .ref-row:last-child{margin-bottom:0}
.angebot .ref-text ul{margin:0 0 26px;padding-left:18px;font-size:18px;line-height:24px}
.angebot .ref-text li{margin-bottom:2px}
.angebot-pic{margin:0}
.slider{position:relative;aspect-ratio:1024/682;background:var(--placeholder);overflow:hidden;touch-action:pan-y}
.slider:focus-visible{outline:2px solid #3e79be;outline-offset:3px}
.slides{list-style:none;margin:0;padding:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.slide.is-active{opacity:1;z-index:1}
.slide img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.slider-dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;justify-content:center;gap:10px}
.slider-dots button{position:relative;width:16px;height:16px;padding:0;border:2px solid #fff;border-radius:50%;background:rgba(0,0,0,.3);cursor:pointer}
.slider-dots button::before{content:"";position:absolute;inset:-8px}
.slider-dots button.is-active{background:#fff}
.slider-btn{position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:30px;line-height:42px;cursor:pointer;opacity:0;transition:opacity .2s}
.slider-btn.prev{left:12px}.slider-btn.next{right:12px}
.slider:hover .slider-btn,.slider:focus-within .slider-btn{opacity:1}
@media (hover:none){.slider-btn{display:none}}
#lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh}
#lightbox::backdrop{background:rgba(0,0,0,.88)}
#lightbox img{position:absolute;inset:0;margin:auto;max-width:92vw;max-height:88vh;object-fit:contain}
#lightbox button{position:absolute;z-index:2;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:34px;line-height:48px;width:48px;height:48px;border-radius:50%;cursor:pointer}
#lightbox .lb-close{top:16px;right:16px}
#lightbox .lb-prev{left:16px;top:50%;margin-top:-24px}
#lightbox .lb-next{right:16px;top:50%;margin-top:-24px}
#lightbox button[hidden]{display:none}
@media (max-width:768px){
  .angebote .ref-row{margin-bottom:40px}
  .angebot-intro{font-size:18px;line-height:26px}
}

/* Startseite: Bewegung in den Kacheln */
.js .tiles li{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 110ms)}
.js .tiles.is-in li{opacity:1;transform:none}
@media (hover:hover){
  .tile:hover .bg,.tile:focus-visible .bg{transform:scale(1.06)}
  /* einmaliger "Wink": Farbfläche mit Titel blendet kurz nacheinander ein und wieder aus */
  .tiles li.peek .hover{animation:peek 1.5s ease-in-out both;animation-delay:calc(var(--i,0) * 260ms)}
  @keyframes peek{0%{opacity:0;transform:translateY(12px)}25%,60%{opacity:1;transform:none}100%{opacity:0;transform:translateY(12px)}}
}
@media (prefers-reduced-motion:reduce){
  .js .tiles li{opacity:1;transform:none}
  .tile .bg{transition:none}
}