/* ================================================================
   FABRIK WILDEGG – HAUPTSTYLESHEET
   Hintergrund: #f7f7f5 | Dunkel: #242826 | Akzent: #b9a47a
   ================================================================ */

/* 1. Farben und allgemeine Grundeinstellungen */
:root {
  --bg:#f7f7f5;
  --paper:#fff;
  --ink:#1e2220;
  --muted:#6e736f;
  --line:#dcded9;
  --dark:#242826;
  --accent:#b9a47a;
  --radius:3px;
  --shadow:0 18px 48px rgba(30,34,32,.08)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  line-height:1.55
}

img {
  display:block;
  max-width:100%
}

a {
  color:inherit
}

button,input,textarea {
  font:inherit
}

.section {
  max-width:1280px;
  margin:0 auto;
  padding:110px clamp(24px,5vw,72px)
}

.eyebrow {
  margin:0 0 18px;
  text-transform:uppercase;
  letter-spacing:.19em;
  font-size:.72rem;
  font-weight:700;
  color:var(--muted)
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2 {
  font-family:"Helvetica Neue",Arial,sans-serif;
  line-height:1.06;
  letter-spacing:-.045em
}

h2 {
  font-size:clamp(2.2rem,5vw,4.6rem);
  font-weight:500
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 25px;
  border:1px solid var(--ink);
  border-radius:1px;
  background:var(--ink);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
  transition:.2s
}

.button:hover {
  background:#444a47;
  border-color:#444a47
}

.button.light {
  background:#fff;
  color:var(--ink);
  border-color:#fff
}

.button.light:hover {
  background:#e8e8e4
}

/* 2. Kopfzeile und Navigation */
.site-header {
  height:108px;
  padding:8px clamp(22px,5vw,72px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:absolute;
  z-index:20;
  width:100%;
  top:0
}

.brand {
  width:190px
}

.brand img {
  width:100%;
  height:auto;
  object-fit:contain
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:34px
}

.site-header nav>a {
  text-decoration:none;
  font-size:.91rem;
  font-weight:600
}

.site-header nav>a:hover {
  opacity:.55
}

.language {
  border:0;
  background:transparent;
  display:flex;
  gap:7px;
  color:#969a97;
  cursor:pointer;
  padding:8px
}

.language .active {
  color:var(--ink);
  font-weight:700
}

.menu-button {
  display:none;
  background:var(--accent);
  border:1px solid var(--accent);
  color:var(--ink);
  padding:8px 12px;
  font-weight:700;
  cursor:pointer
}

/* 3. Grosses Titelbild / Hero-Bereich */
.hero {
  min-height:790px;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,43%);
  align-items:center;
  padding:150px clamp(24px,7vw,105px) 90px;
  overflow:hidden;
  border-bottom:1px solid var(--line)
}

.hero-copy {
  position:relative;
  z-index:2;
  max-width:790px
}

.hero h1 {
  font-size:clamp(4.1rem,8.5vw,8.4rem);
  font-weight:500;
  margin-bottom:34px;
  color:var(--accent)
}
.hero h1 .hero-fuer {
	color:var(--ink);
	font-weight:400;
	font-style:italic;
	}
.hero h1 em {
  font-weight:400;
  color:var(--ink)
}

.spaces h2 em {
  font-weight:400;
  color:#8d918d
}

.hero-copy>p:not(.eyebrow) {
  max-width:590px;
  font-size:1.18rem;
  color:var(--muted);
  margin-bottom:34px
}

.hero-building {
  align-self:stretch;
  opacity:.08;
  transform:scale(1.25);
  transform-origin:bottom right;
  background-position:right bottom;
  background-repeat:no-repeat;
  background-size:contain
}

@media (min-width:901px) {
  .hero-building {
    background-image:url("/assets/logo.png")
  }
}

.hero-line {
  position:absolute;
  left:7%;
  right:0;
  bottom:63px;
  border-bottom:1px solid #d5d8d3
}

.hero-line:after {
  content:"";
  position:absolute;
  right:8%;
  bottom:0;
  height:36vh;
  border-left:1px solid #d5d8d3
}

/* 4. Einleitung und Mieterübersicht */
.intro {
  display:grid;
  grid-template-columns:1.5fr .7fr;
  gap:9vw;
  align-items:end
}

.intro h2 {
  margin:0
}

.intro>p {
  font-size:1.08rem;
  color:var(--muted);
  margin-bottom:10px
}

.tenants-section {
  padding-top:35px
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:48px
}

.section-heading h2 {
  margin:0
}

.link-note {
  color:var(--muted);
  font-size:.88rem;
  max-width:210px
}

.tenant-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:22px
}

.tenant-card {
  grid-column:span 4;
  background:var(--paper);
  text-decoration:none;
  border:1px solid #e5e6e2;
  overflow:hidden;
  min-width:0
}

.tenant-card.featured {
  grid-column:span 8;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  background:var(--dark);
  color:#fff;
  border-color:var(--dark)
}

.tenant-image {
  height:260px;
  background:#fff;
  overflow:hidden
}

.tenant-image img {
  width:100%;
  height:100%;
  object-fit:contain
}

.featured .tenant-image {
  height:100%;
  min-height:400px;
  background:#000
}

.tenant-copy {
  padding:28px
}

.card-category {
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.69rem;
  font-weight:700;
  color:var(--muted);
  margin-bottom:14px
}

.featured .card-category,.featured .tenant-copy>p:last-child {
  color:#b7bbb8
}

.card-title {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:start
}

.card-title h3 {
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(1.35rem,2vw,2rem);
  line-height:1.12;
  letter-spacing:-.025em
}

.card-title span {
  font-size:1.45rem;
  transition:.2s
}

.tenant-copy>p:last-child {
  color:var(--muted);
  margin-bottom:0
}

.tenant-card.clickable {
  transition:transform .25s,box-shadow .25s
}

.tenant-card.clickable:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow)
}

.tenant-card.clickable:hover .card-title span {
  transform:translate(3px,-3px)
}

.tenant-card.static {
  cursor:default
}

/* 5. Gewerbeboxen */
.spaces {
  max-width:1440px;
  margin:70px auto 0;
  background:var(--dark);
  color:#fff;
  min-height:600px;
  padding:clamp(55px,8vw,115px);
  display:grid;
  grid-template-columns:1.25fr .75fr;
  align-items:center;
  gap:60px
}

.spaces h2 {
  font-size:clamp(3rem,7vw,7rem);
  margin-bottom:30px
}

.spaces-copy>p:not(.eyebrow) {
  max-width:620px;
  color:#bcc0bd;
  font-size:1.08rem;
  margin-bottom:34px
}

.spaces .eyebrow {
  color:#c8cbc9
}

.space-count {
  text-align:center;
  border-left:1px solid #565b58;
  padding:70px 0
}

.space-count strong {
  display:block;
  font:500 clamp(7rem,16vw,14rem)/.8 "Helvetica Neue",Arial,sans-serif;
  color:var(--accent);
  letter-spacing:-.08em
}

.space-count span {
  display:block;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#d4d7d5;
  margin-top:30px
}

/* 6. Kontaktformular und Fusszeile */
.contact {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:9vw
}

.contact h2 {
  font-size:clamp(2.4rem,4vw,4rem)
}

address {
  font-style:normal;
  color:var(--muted);
  font-size:1.08rem
}

address a {
  text-decoration:none
}

.contact-form,.stack,.tenant-form {
  display:grid;
  gap:18px
}

.contact-form label,.stack label,.tenant-form label {
  display:grid;
  gap:7px;
  font-size:.83rem;
  font-weight:600
}

.form-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

input,textarea {
  width:100%;
  border:1px solid #cfd2cd;
  background:#fff;
  border-radius:1px;
  padding:13px 14px;
  color:var(--ink);
  outline:none
}

input:focus,textarea:focus {
  border-color:#5a605c;
  box-shadow:0 0 0 3px rgba(90,96,92,.1)
}

textarea {
  resize:vertical
}

.contact-form .button {
  justify-self:start
}

.honeypot {
  position:absolute!important;
  left:-9999px!important
}

.notice {
  padding:13px 15px;
  border-left:3px solid
}

.notice.success {
  background:#edf5ef;
  border-color:#4e805a
}

.notice.error {
  background:#fff0ef;
  border-color:#a8473d
}

footer {
  max-width:1280px;
  margin:0 auto;
  padding:45px clamp(24px,5vw,72px);
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  color:var(--muted);
  font-size:.84rem
}

footer img {
  width:170px;
  max-width:100%;
  height:auto
}

footer p {
  margin:0
}

footer div {
  display:flex;
  gap:24px
}

footer a {
  text-decoration:none
}

/* 7. Geschützte Verwaltung */
.admin-page {
  min-height:100vh;
  background:#eeefec
}

.auth-card {
  width:min(520px,calc(100% - 32px));
  margin:7vh auto;
  background:#fff;
  padding:clamp(28px,5vw,54px);
  box-shadow:var(--shadow)
}

.auth-card img {
  width:260px;
  margin:0 auto 35px
}

.auth-card h1 {
  font-size:2.4rem
}

.auth-card hr {
  border:0;
  border-top:1px solid var(--line);
  width:100%
}

.auth-card small {
  font-weight:400;
  color:var(--muted)
}

.admin-header {
  height:92px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px clamp(20px,4vw,60px)
}

.admin-header img {
  width:190px;
  height:70px;
  object-fit:contain
}

.admin-header nav {
  display:flex;
  gap:22px
}

.admin-header a {
  text-decoration:none
}

.admin-main {
  max-width:1100px;
  margin:0 auto;
  padding:60px 24px 100px
}

.admin-title {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:28px
}

.admin-title h1,.admin-title h2 {
  font-size:clamp(2rem,5vw,4rem);
  margin:0
}

.admin-title>p {
  max-width:390px;
  color:var(--muted)
}

.tenant-editor {
  background:#fff;
  border:1px solid var(--line);
  margin-bottom:12px
}

.tenant-editor summary {
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  cursor:pointer;
  list-style:none
}

.tenant-editor summary::-webkit-details-marker {
  display:none
}

.tenant-editor summary strong {
  flex:1
}

.tenant-editor summary>span:last-child {
  font-size:.78rem;
  color:var(--muted)
}

.order-pill {
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--dark);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:.7rem
}

.add-editor summary {
  font-weight:700
}

.tenant-form {
  padding:22px;
  border-top:1px solid var(--line)
}

.tenant-form textarea {
  min-height:80px
}

.checkbox {
  display:flex!important;
  grid-template-columns:auto 1fr;
  align-items:center;
  align-self:end;
  padding-bottom:13px
}

.checkbox input {
  width:auto
}

.image-control {
  display:grid;
  grid-template-columns:170px 1fr;
  align-items:center;
  gap:22px
}

.image-control img {
  width:170px;
  height:100px;
  object-fit:contain;
  background:#fff
}

.form-actions {
  display:flex;
  gap:14px
}

.remove-image {
  padding:0 22px 20px
}

.text-button {
  background:transparent;
  border:0;
  padding:0;
  text-decoration:underline;
  cursor:pointer;
  color:#5c615e
}

.messages {
  margin-top:80px
}

.message {
  background:#fff;
  border:1px solid var(--line);
  padding:20px;
  margin-bottom:12px
}

.message.unread {
  border-left:4px solid var(--accent)
}

.message small {
  display:block;
  color:var(--muted);
  margin-top:4px
}

.message p {
  margin:14px 0
}

.empty {
  color:var(--muted)
}

/* 8. Tablet-Darstellung */
@media(max-width:900px) {
  .site-header {
    height:98px
  }

  .brand {
    width:180px
  }

  .brand img {
    height:auto
  }

  .menu-button {
    display:block
  }

  .site-header nav {
    display:none;
    position:absolute;
    top:92px;
    left:18px;
    right:18px;
    background:#fff;
    box-shadow:var(--shadow);
    padding:22px;
    flex-direction:column;
    align-items:stretch;
    gap:16px
  }

  .site-header nav.open {
    display:flex
  }

  .language {
    padding-left:0
  }

  .hero {
    min-height:720px;
    grid-template-columns:1fr;
    padding-top:145px
  }

  .hero-building {
    display:none
  }

  .intro,.contact {
    grid-template-columns:1fr;
    gap:35px
  }

  .tenant-card {
    grid-column:span 6
  }

  .tenant-card.featured {
    grid-column:span 12
  }

  .spaces {
    grid-template-columns:1fr
  }

  .space-count {
    border-left:0;
    border-top:1px solid #565b58
  }

  .section {
    padding-top:80px;
    padding-bottom:80px
  }
}

/* 9. Smartphone-Darstellung */
@media(max-width:620px) {
  .site-header {
    height:94px;
    padding:8px 18px
  }

  .brand {
    width:172px
  }

  .site-header nav {
    top:88px
  }

  .section {
    padding-left:18px;
    padding-right:18px;
    padding-top:72px;
    padding-bottom:72px
  }

  .hero {
    padding:138px 20px 84px;
    min-height:max(690px,100svh)
  }

  .hero h1 {
    max-width:100%;
    margin-bottom:28px;
    font-size:clamp(2.55rem,12.5vw,3.45rem);
    line-height:1.02
  }

  .hero-copy>p:not(.eyebrow) {
    font-size:1rem;
    line-height:1.68;
    margin-bottom:30px
  }

  .hero-line {
    left:20px;
    right:20px;
    bottom:38px
  }

  .hero-line:after {
    display:none
  }

  .intro {
    padding-bottom:45px
  }

  .section-heading {
    display:block
  }

  .link-note {
    margin-top:18px
  }

  .tenant-grid {
    display:block
  }

  .tenant-card,.tenant-card.featured {
    display:block;
    margin-bottom:16px
  }

  .tenant-card.featured .tenant-image,.featured .tenant-image,.tenant-image {
    height:auto;
    min-height:0;
    aspect-ratio:16 / 10
  }

  .tenant-copy {
    padding:22px
  }

  .spaces {
    margin-top:30px;
    padding:65px 22px;
    min-height:0
  }

  .spaces h2 {
    font-size:3.4rem
  }

  .space-count {
    padding:50px 0 10px
  }

  .contact {
    gap:45px
  }

  .form-columns {
    grid-template-columns:1fr
  }

  footer {
    align-items:flex-start;
    flex-direction:column
  }

  .admin-header nav a:first-child {
    display:none
  }

  .admin-title {
    display:block
  }

  .image-control {
    grid-template-columns:1fr
  }

  .image-control img {
    width:100%;
    height:170px
  }

  .tenant-editor summary {
    gap:10px;
    padding:15px
  }

  .tenant-editor summary>span:last-child {
    display:none
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  .tenant-card.clickable {
    transition:none
  }
}

/* 10. Datenschutzseite */
.legal {
  max-width:900px
}

.legal h1 {
  font-size:clamp(2.7rem,7vw,5.5rem);
  margin-bottom:55px
}

.legal h2 {
  font-size:1.45rem;
  letter-spacing:-.02em;
  margin:38px 0 12px
}

.legal p {
  max-width:760px;
  color:var(--muted)
}