/* ============================================================
   Regionaldirektion Malte Leesemann
   Farben:  Akzent (Mecklenburgische gelb): #ffc700
            Dunkel:                        #2c313a
            Hell:                          #f9f9f9
   ============================================================ */

:root {
  --c-accent: #ffc700;
  --c-dark:   #2c313a;
  --c-light:  #f9f9f9;
  --c-muted:  #666;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  font-family: 'Titillium Web', sans-serif;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--c-dark);
  color: #1f1f1f;
}
body { overflow: hidden; position: fixed; }

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a { text-decoration: none; color: #fff; }

/* Typography (preserve original vw-based scale) */
h1 { padding: 0; margin: 0; font-size: 2vw; }
h2 { padding: 0; margin: 0; font-size: 1.7vw; letter-spacing: 5px; font-family: 'Roboto', sans-serif; }
h3 { padding: 0; margin: 0; font-size: 1.2vw; letter-spacing: 5px; font-family: 'Roboto', sans-serif; }
p  { padding: 0; margin: 0; font-size: 0.9vw; font-family: 'Slabo 27px', serif; }
a  { padding: 0; margin: 0; font-size: 0.9vw; font-family: 'Slabo 27px', serif; }
td { padding: 0; margin: 0; font-size: 1vw;   font-family: 'Slabo 27px', serif; }

.page { margin: 0; padding: 0; position: relative; background: var(--c-light); }

.site {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
  transition: transform .5s cubic-bezier(.65,0,.35,1);
}
.site.blur { filter: blur(8px); }
.site.is-shifted { transform: translateX(100%); }

/* ============================================================
   Floating "Schreibe uns!" button
   ============================================================ */
#msg-button {
  z-index: 82; position: fixed; top: 88%; left: 93%;
  width: 4vw; height: 4vw; display: block;
}
#msg-button .msg-bg, #msg-button .msg-vg { position: absolute; }
#msg-button .msg-bg { top: 0; left: 0; width: 100%; height: 100%; fill: var(--c-accent); filter: drop-shadow(0 3px 6px #000); }
/* Briefumschlag visuell mittig im Sprechblasen-Kreis (Schwanz unten links ausgleichen) */
#msg-button .msg-vg { top: 42%; left: 50%; width: 50%; height: 50%; fill: #fff; transform: translate(-50%, -50%); }

#msg-info {
  opacity: 0; pointer-events: none;
  position: fixed; z-index: 87; top: 91%; left: 84%;
  width: 8%; height: 4%;
  background: var(--c-accent); color: #fff;
  display: flex; justify-content: center; align-items: center;
  clip-path: polygon(0% 0%, 91% 0, 100% 50%, 91% 100%, 0% 100%);
  transition: opacity .1s;
}
#msg-button:hover + #msg-info { opacity: 1; }
#msg-info p { font-size: 1.1vw; text-align: center; }

/* ============================================================
   Menu icon + overlay
   ============================================================ */
#menu-icon {
  fill: #fff; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-miterlimit: 10;
  width: 2%; height: 3%; position: fixed; z-index: 90; top: 2%; right: 2.5%;
  transition: opacity .3s ease, transform .3s ease;
}
#menu-icon svg { width: 100%; height: 100%; display: block; }
#menu-icon .line { transition: transform .4s ease, opacity .3s; }

/* Wenn eine Unterseite offen ist: Burger nach rechts ausblenden */
.subpage-open #menu-icon,
.subpage-open #menu-font {
  opacity: 0;
  transform: translateX(60%);
  pointer-events: none;
}
#menu-icon .line-1 { transform-origin: 50% 50%; }
#menu-icon .line-2 { transform-origin: 100% 50%; }
#menu-icon .line-3 { transform-origin: 0 50%; }
#menu-icon .line-4 { transform-origin: 50% 50%; }

/* Menu open: morph hamburger to X */
.menu-open #menu-icon .line-2,
.menu-open #menu-icon .line-3 { transform: scaleX(0); }
.menu-open #menu-icon .line-1 { transform: rotate(45deg); }
.menu-open #menu-icon .line-4 { transform: rotate(135deg); }

#menu-font {
  position: fixed; z-index: 90; color: #fff; top: 1%; right: 4.5%;
  height: 5%; width: 5%;
  display: flex; overflow: hidden; justify-content: center; align-items: center;
  transition: opacity .3s, transform .3s;
}
#menu-font p { padding-top: 2%; font-size: 1.0vw; letter-spacing: 5px; }

#sectionname {
  z-index: 88; position: fixed; color: #fff;
  top: 2%; left: 4.5%;
  height: 3%; width: 25%;
  display: flex; overflow: hidden; align-items: center;
  transition: opacity .3s;
}
#sectionname p { z-index: 88; margin: 0; padding: 0; line-height: 1; font-size: 1.0vw; letter-spacing: 5px; }
/* Wenn eine Unterseite offen ist: "Zurück" wird klickbar */
.subpage-open #sectionname { cursor: pointer; }
.subpage-open #sectionname:hover p { opacity: .7; }

#menu-iconbg {
  margin: 0; padding: 0; z-index: 87; width: 100%; height: 7%;
  position: fixed; background: var(--c-dark); top: -10%; left: 0;
  transition: top .3s;
}
.show-header #menu-iconbg { top: 0; }

#menu-bg {
  margin: 0; padding: 0; z-index: 88; width: 100%; height: 100%;
  position: fixed; background: var(--c-dark); top: 0; left: 0;
  transform: translateY(-100%);
  transition: transform .3s cubic-bezier(.65,0,.35,1);
}
.menu-open #menu-bg { transform: translateY(0); }

/* === Schließ-Sequenz: erst die Menüpunkte nach links, dann der Hintergrund nach oben ===
   Spezifität durch doppelte Klassen erhöht, damit die nth-child-Delays aus der Öffnungsstufe
   nicht weiterhin gelten. */
.menu-open.menu-closing #menu .menu-nav {
  opacity: 0;
  transform: translateX(-200%);
  transition-delay: 0s, 0s, 0s, 0s;
  transition-duration: .25s, .3s, .15s, .15s;
}
.menu-open.menu-closing #menu-bg {
  transform: translateY(-100%);
  transition-delay: .3s;
}
.menu-open.menu-closing #menu .zw-strich {
  opacity: 0;
  transform: scaleX(0);
  transition-delay: 0s;
}

#menu {
  width: 100%; height: 100%;
  display: flex; overflow: hidden;
  justify-content: center; align-items: center;
  flex-direction: column; flex-wrap: nowrap;
}
#menu .menu-nav {
  opacity: 0; transform: translateX(-200%);
  text-align: center; text-transform: uppercase;
  margin: 1%; width: 24%; background: #fff;
  clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
  /* Wichtig: clip-path und background haben KEINE Delay, damit Hover sofort reagiert.
     Nur opacity + transform werden für die Öffnungs-Stagger verzögert. */
  transition-property: opacity, transform, clip-path, background;
  transition-duration: .35s, .45s, .15s, .15s;
  transition-timing-function: ease, ease, ease, ease;
  transition-delay: 0s, 0s, 0s, 0s;
  font-weight: bold; font-size: 1.6vw; color: var(--c-dark);
  font-family: 'Slabo 27px', serif; letter-spacing: 3px;
}
.menu-open #menu .menu-nav { opacity: 1; transform: translateX(0); }
.menu-open #menu .menu-nav:nth-child(3) { transition-delay: .1s, .1s, 0s, 0s; }
.menu-open #menu .menu-nav:nth-child(4) { transition-delay: .2s, .2s, 0s, 0s; }
.menu-open #menu .menu-nav:nth-child(5) { transition-delay: .3s, .3s, 0s, 0s; }
.menu-open #menu .menu-nav:nth-child(6) { transition-delay: .4s, .4s, 0s, 0s; }
.menu-open #menu .menu-nav:nth-child(7) { transition-delay: .5s, .5s, 0s, 0s; }
.menu-open #menu .menu-nav:nth-child(8) { transition-delay: .6s, .6s, 0s, 0s; }

/* Hover-Effekt nur auf Geräten mit echter Hover-Fähigkeit (verhindert das
   "Hover-bleibt-kleben"-Problem auf Touch-Geräten, das die Schließ-Animation stört) */
@media (hover: hover) {
  #menu .menu-nav:hover {
    background: var(--c-accent);
    clip-path: polygon(100% 0, 97% 50%, 100% 100%, 0 100%, 3% 50%, 0 0);
  }
}
#menu .menu-nav.header {
  background: transparent !important; color: #fff;
  font-weight: bold; font-size: 2.1vw; font-family: 'Roboto', sans-serif;
  cursor: default; clip-path: none;
  pointer-events: none;
  opacity: 1 !important; transform: none !important;
}
#menu .zw-strich {
  opacity: 0; width: 24%; height: 6px; background: #fff; margin: 0 38%;
  transition: opacity .3s, transform .3s;
  transform: scaleX(0);
}
.menu-open #menu .zw-strich { opacity: 1; transform: scaleX(1); }

/* ============================================================
   Arrows
   ============================================================ */
#arrow {
  display: none;
  fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10;
  width: 1%; height: 3%; position: fixed; z-index: 88; top: 2%; left: 2%;
  transform: rotate(180deg);
  transition: transform .5s cubic-bezier(.65,0,.35,1);
}
#arrow svg { width: 100%; height: 100%; display: block; fill: inherit; stroke: inherit; }
.show-arrow #arrow { display: block; }
/* Auf Unterseite: Pfeil nach links zeigen lassen (Zurück) */
.subpage-open #arrow { display: block; transform: rotate(90deg); }

#arrow-down {
  fill: none; stroke: var(--c-accent); stroke-width: 8;
  stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10;
  width: 2%; height: 4%; position: absolute; top: 93%; left: 86.75%; z-index: 2;
  transition: opacity .3s;
}
#arrow-down svg { width: 100%; height: 100%; display: block; fill: inherit; stroke: inherit; }
.scrolled #arrow-down { opacity: 0; pointer-events: none; }

/* ============================================================
   Sub-pages (Privat, Landwirtschaft, Gewerbe, Impressum, Datenschutz)
   ============================================================ */
.subpage {
  position: fixed; left: 0; top: 0;
  width: 100%; height: 100%;
  overflow-x: hidden; overflow-y: scroll;
  background: var(--c-dark); color: var(--c-light);
  z-index: 81;
  transform: translateY(-100%);
  transition: transform .5s cubic-bezier(.65,0,.35,1);
}
.subpage.is-open { transform: translateY(0); }

.subpage-impressum, .subpage-datenschutz { z-index: 86; padding-top: 5%; }
.subpage-impressum a, .subpage-datenschutz a { color: var(--c-light); font-size: 1.1vw; text-decoration: underline; }
.subpage-impressum h2, .subpage-datenschutz h2 { text-transform: uppercase; padding: 1% 0; text-align: center; }
.subpage-datenschutz h3 { text-transform: uppercase; padding-top: 1%; width: 50%; margin-left: 25%; }
.subpage-datenschutz p { padding-bottom: 1%; width: 50%; margin-left: 25%; font-size: 1.1vw; }
.subpage-datenschutz .zw-strich { background: var(--c-light); height: 5px; width: 50%; margin: 0 25% 1%; }
.subpage-impressum h3 { text-transform: uppercase; padding-top: 1%; width: 60%; margin-left: 20%; }
.subpage-impressum p  { padding-bottom: 1%; width: 60%; margin-left: 20%; font-size: 1.1vw; }
.subpage-impressum .zw-strich { background: var(--c-light); height: 5px; width: 60%; margin: 0 20% 1%; }

/* Sparten sub-pages (Privat / Landwirtschaft / Gewerbe) */
.subpage-sparte { background: var(--c-light); color: var(--c-dark); z-index: 81; transform: translateX(-100%); }
.subpage-sparte.is-open { transform: translateX(0); }
.subpage-sparte.blur { filter: blur(8px); }

.subpage-sparte .line {
  z-index: 1; border-left: 5px dashed var(--c-dark);
  width: 50%; position: absolute; left: 50%; top: 15%;
}
.subpage-privat .line          { height: 350%; }
.subpage-landwirtschaft .line  { height: 240%; }
.subpage-gewerbe .line         { height: 290%; }

.subpage-sparte .bg-sparte {
  z-index: 2; position: relative; height: 35%; width: 55%; top: 15%; left: 22.5%;
  background-repeat: no-repeat; background-size: cover;
}
.subpage-privat        .bg-sparte { background: url('../images/privat.jpg')  center / cover no-repeat; }
.subpage-landwirtschaft .bg-sparte { background: url('../images/lw.jpg')      50% 100% / cover no-repeat; }
.subpage-gewerbe       .bg-sparte { background: url('../images/gewerbe.jpg') center / cover no-repeat; }

.subpage-sparte .bg-header {
  z-index: 2; padding-bottom: 2%; margin-bottom: 12.5%;
  width: 20%; height: 12%; position: relative; left: 40%; top: 8%;
  background: var(--c-light);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
}
.subpage-sparte .bg-header h2 { font-family: 'Roboto', sans-serif; margin-top: 8%; color: var(--c-dark); text-align: center; text-transform: uppercase; }
.subpage-sparte .bg-header p  { margin-bottom: 8%; color: var(--c-muted); text-align: center; text-transform: uppercase; }
.subpage-sparte .bg-header .zw-strich { z-index: 2; width: 14%; height: 5px; background: var(--c-accent); margin: 3% 43%; }

.subpage-sparte .box.left  { position: relative; z-index: 2; margin: 7% 47% 7% 8%; width: 45%; background: var(--c-dark); }
.subpage-sparte .box.right { position: relative; z-index: 2; margin: 7% 8% 7% 47%; width: 45%; background: var(--c-dark); }
.subpage-sparte .box p { color: var(--c-light); padding: 4% 4% 14%; text-align: center; font-size: 1.1vw; }

.subpage-sparte .box-header {
  z-index: 3; width: 31%; height: 10%; position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  background: var(--c-light);
}
.subpage-sparte .box-header.left  { margin: -11% 54% 6% 15%; }
.subpage-sparte .box-header.right { margin: -11% 15% 6% 54%; }
.subpage-sparte .box-header h3 { font-family: 'Roboto', sans-serif; margin-top: 8%; color: var(--c-dark); text-align: center; text-transform: uppercase; }
.subpage-sparte .box-header p  { margin-bottom: 8%; color: var(--c-muted); text-align: center; text-transform: uppercase; }
.subpage-sparte .box-header .zw-strich { z-index: 2; width: 14%; height: 5px; background: var(--c-accent); margin: 3% 43%; }

/* ============================================================
   Form modals (native <dialog>)
   ============================================================ */
.formular {
  border: 0; padding: 0; margin: 0;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  background: var(--c-dark); color: inherit;
  opacity: 0; transform: scale(.6);
  transition: opacity .25s ease, transform .25s ease;
}
.formular.is-visible { opacity: 1; transform: scale(1); }
.formular.formular-msg { background: transparent; }
.formular::backdrop { background: rgba(0,0,0,.45); }

.form-shell { position: absolute; width: 25%; height: 80%; top: 20%; left: 37.5%; }
.formular-termin .form-shell  { top: 15%; }
.formular-schaden .form-shell,
.formular-evb     .form-shell { top: -5%; width: 35%; left: 32.5%; }

.formular h2 { color: var(--c-dark); text-transform: uppercase; font-family: 'Roboto', sans-serif; font-size: 1.5vw; }
.formular p  { padding: 2% 8% 0; }

.form-header {
  margin-top: 10%; width: 100%; height: 10%;
  background: var(--c-accent);
  display: flex; justify-content: center; align-items: center;
}
.form-content { width: 100%; background: var(--c-light); overflow: hidden; }

.formular form {
  width: 92%; padding: 0 4% 4%;
  display: flex; justify-content: center; align-items: center;
  flex-wrap: nowrap; flex-direction: column;
}
.formular .column {
  padding: 2% 0; width: 100%;
  display: flex; justify-content: center;
}
.formular input,
.formular select,
.formular textarea {
  outline: none; padding: 0;
  background: transparent; border: 0; border-bottom: 2px solid var(--c-dark);
  font-family: 'Titillium Web', sans-serif; color: #1f1f1f; font-size: 0.85vw;
}
.formular input,
.formular select { width: 43%; margin: 3% 4%; }
.formular textarea { width: 92%; margin: 3% 4%; }
.formular .honey { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.formular .submit, .formular .close {
  color: #fff; padding: 1.4% 6%;
  margin: 6% 4% 0; border-radius: 0;
  font-size: 0.95vw; transition: background .2s;
}
.formular .submit { background: var(--c-dark); }
.formular .submit:hover { background: #4a526d; }
.formular .close  { background: #555; }
.formular .close:hover  { background: #888; }

.formular .datenschutzbox { margin-bottom: 2%; }
.formular .datenschutzbox p { padding: 2% 2% 0 0; }
.formular .datenschutzbox input { margin: 0 4% 0 1%; width: auto; }
.formular .datenschutzbox button.link-datenschutz {
  color: #1f1f1f; text-decoration: underline;
  font: inherit; padding: 0; display: inline;
}

/* ============================================================
   Sections — STARTSEITE
   ============================================================ */
#startseite { width: 100%; height: 100%; }
#startseite .bg-box  { position: absolute; width: 25%; height: 100%; left: 75%; top: 0; background: var(--c-dark); }
#startseite .bg-team { position: absolute; height: 60%; width: 65%; left: 22.5%; top: 20%;
                       background: url('../images/team.jpg') right top / 80% no-repeat; }
#startseite .textbox { position: absolute; height: 30%; width: 26.5%; top: 35%; left: 0; background: var(--c-light);
                       display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
#startseite .textbox h2 { font-family: 'Roboto', sans-serif; margin-top: 8%; color: var(--c-dark); text-align: right; text-transform: uppercase; }
#startseite .textbox p  { margin-bottom: 8%; color: var(--c-muted); text-align: center; text-transform: uppercase; }
#startseite .zw-strich  { width: 14%; height: 5px; background: var(--c-accent); margin: 0 0 0 86%; }

#startseite .logo {
  opacity: 1; position: absolute; height: 10%; width: 20%; top: 3%; left: 5%;
  transition: opacity .3s; display: block;
}
#startseite .logo:hover { opacity: .6; }
#startseite .me { float: left; width: 90%; height: 90%; background: url('../images/me.svg') center / contain no-repeat; }

#startseite .border.top      { position: absolute; width: 3%; height: 5%; border-top: var(--c-light) solid 3px; border-right: var(--c-light) solid 3px; top: 18%; left: 85.5%; }
#startseite .border.bottom-1 { position: absolute; width: 3%; height: 5%; border-bottom: var(--c-light) solid 3px; border-right: var(--c-light) solid 3px; top: 76.5%; left: 85.5%; }
#startseite .border.bottom-2 { position: absolute; width: 3%; height: 5%; border-right: var(--c-light) solid 3px; top: 81.5%; left: 85.5%; }

/* ============================================================
   Sections — ÜBER UNS
   ============================================================ */
#uberuns { width: 100%; height: 60%; }
#uberuns .bg-box.top  { position: absolute; top: 0; left: 0; width: 100%; height: 70%; background: var(--c-dark); }
#uberuns .bg-box.left { position: absolute; top: 0; left: 0; width: 25%; height: 100%; background: var(--c-dark); }
#uberuns .text { position: absolute; width: 45%; height: 20%; top: 20%; left: 27.5%; }
#uberuns .text h3 { color: var(--c-light); text-transform: uppercase; }
#uberuns .text p  { margin-top: 5%; color: #ddd; text-align: left; font-size: 1.1vw; }
#uberuns .border.right { position: absolute; width: 6%; height: 6%; border-bottom: var(--c-light) solid 3px; border-right: var(--c-light) solid 3px; top: 29%; left: 82.5%; }
#uberuns .border.left  { position: absolute; width: 6%; height: 6%; border-top: var(--c-light) solid 3px; border-left: var(--c-light) solid 3px; top: 35%; left: 11%; }

/* ============================================================
   Sections — SPARTEN (Privat / Landwirtschaft / Gewerbe)
   ============================================================ */
.sparte-section { width: 100%; height: 50%; }
.sparte-section .bg-box.left { position: absolute; top: 0; left: 0; width: 25%; height: 100%; background: var(--c-dark); }
.sparte-section .bg-sparte   { position: absolute; height: 90%; width: 55%; top: 5%; left: 12.5%; background-repeat: no-repeat; background-size: cover; }

#privat        .bg-sparte { background-image: url('../images/privat.jpg');  background-position: center; }
#landwirtschaft .bg-sparte { background-image: url('../images/lw.jpg');      background-position: 0% center; }
#gewerbe       .bg-sparte { background-image: url('../images/gewerbe.jpg'); background-position: center 0%; }

.sparte-section .textbox {
  position: absolute; height: 45%; width: 25%; top: 27.5%; left: 55%;
  background: var(--c-light);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
}
.sparte-section .textbox h2 { font-family: 'Roboto', sans-serif; margin-top: 8%; color: var(--c-dark); text-align: center; text-transform: uppercase; }
.sparte-section .textbox p  { margin-bottom: 8%; color: var(--c-muted); text-align: center; text-transform: uppercase; }
.sparte-section .zw-strich  { width: 14%; height: 5px; background: var(--c-accent); margin: 0 43%; }

.sparte-section .border.top    { position: absolute; width: 3%; height: 5%; border-bottom: var(--c-light) solid 3px; border-left: var(--c-light) solid 3px; top: -5%; left: 11%; }
.sparte-section .border.bottom { position: absolute; width: 3%; height: 5%; border-left: var(--c-light) solid 3px; top: 0; left: 11%; }
#gewerbe .border.bottom2 { position: absolute; width: 3%; height: 5%; border-left: var(--c-light) solid 3px; border-bottom: var(--c-light) solid 3px; top: 94%; left: 11%; }

.sparte-section .overlay {
  width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
  background-color: rgba(255,255,255,0); transition: background-color .3s;
}
.sparte-section .overlay:hover { background-color: rgba(255,255,255,.5); }
#gewerbe .overlay:hover { background-color: rgba(255,255,255,.6); }

.sparte-section .overlay .button {
  opacity: 0; background: var(--c-dark);
  width: 25%; height: 10%; border: 1px #fff solid;
  color: #fff; font-size: 1.3vw; display: table;
  transition: opacity .3s;
}
.sparte-section .overlay:hover .button { opacity: .9; }
.sparte-section .overlay .button p {
  display: table-cell; vertical-align: middle; text-align: center;
  padding: 1%; text-transform: uppercase; font-family: 'Slabo 27px', serif; color: #fff;
}

/* ============================================================
   Sections — TEAM
   ============================================================ */
#team { width: 100%; height: 75%; }
#team .bg-box.bottom { position: absolute; top: 30%; left: 0; width: 100%; height: 70%; background: var(--c-dark); }
#team .bg-box.left   { position: absolute; top: 0; left: 0; width: 25%; height: 100%; background: var(--c-dark); }

#team .content {
  position: absolute; width: 100%; height: 65%; top: 32.5%;
  display: flex; justify-content: center; align-items: center; align-content: center;
  flex-direction: row; flex-wrap: wrap;
}
#team .box { background: var(--c-light); height: 60%; width: 17%; margin: 0 0.7%; padding: 0 0 1%; }
#team .portrait { height: 50%; width: 90%; margin: 5% 5% 0; background-position: center 10%; background-repeat: no-repeat; background-size: cover; background-color: #c0c0c0; }
#team .portrait.leesemann { background-image: url('../images/leesemann.jpg'); }
#team .portrait.lietzow   { background-image: url('../images/lietzow.jpg'); }
#team .portrait.tjark     { background-image: url('../images/tjark.jpg'); }
#team .portrait.hamann    { background-image: url('../images/hamann.jpg'); }
#team .portrait.pohlmann  { background-image: url('../images/lea.jpg'); background-position: center center; }

#team .box h3 { margin-top: 5%; text-align: center; color: var(--c-dark); text-transform: uppercase; font-size: 1vw; letter-spacing: 3px; }
#team .box .zw-strich { width: 14%; height: 5px; background: var(--c-accent); margin: 2% 43%; }
#team .box p { text-align: center; color: var(--c-dark); text-transform: uppercase; font-size: 0.8vw; }
#team .email {
  display: block; font-size: 0.65vw; margin: 2% 0; color: var(--c-muted); text-align: center; word-break: break-all;
}
#team .email:hover { text-decoration: underline; }

#team .border.one   { position: absolute; width: 4%; height: 7%; border-left: var(--c-light) solid 3px; top: 62.5%; left: 22.4%; }
#team .border.two   { position: absolute; width: 4%; height: 7%; border-left: var(--c-light) solid 3px; top: 62.5%; left: 40.8%; }
#team .border.three { position: absolute; width: 4%; height: 7%; border-left: var(--c-light) solid 3px; top: 62.5%; left: 59.2%; }
#team .border.four  { position: absolute; width: 4%; height: 7%; border-left: var(--c-light) solid 3px; top: 62.5%; left: 77.6%; }

/* ============================================================
   Sections — KONTAKT
   ============================================================ */
#kontakt { width: 100%; height: 120%; background: var(--c-light); }
#kontakt .content { z-index: 1; position: absolute; width: 50%; height: 70%; top: 13%; left: 35%; }
#kontakt .zw-strich { width: 14%; height: 5px; background: var(--c-accent); margin: 5% 43% 0; }

#kontakt .box.info {
  background: var(--c-light); margin: 0 0 8%; width: 100%; height: 40%;
  display: flex; justify-content: center; align-items: center; flex-direction: row;
  border: 20px solid var(--c-dark); padding-bottom: 3%;
}
#kontakt .box.map { width: 100%; height: 43%; border: 20px solid var(--c-dark); }
#kontakt .box.info .kontakt, #kontakt .box.info .zeiten { height: 100%; width: 49%; }

#kontakt .box.info h3 { margin-top: 10%; text-align: center; color: var(--c-dark); text-transform: uppercase; }
#kontakt .box.info .kontakt table { width: 60%; margin: 3% 0 0 20%; }
#kontakt .box.info .kontakt td { color: var(--c-muted); text-align: left; padding: 4%; }
#kontakt .box.info .kontakt td.nummer { color: #222; text-align: right; }
#kontakt .box.info .kontakt td.nummer a { color: #222; font-size: 1vw; }
#kontakt .box.info .kontakt td.nummer a:hover { text-decoration: underline; }
#kontakt .box.info .kontakt td.icon { font-size: 1.6vw; }

#kontakt .box.info .zeiten p { color: #444; margin: 2% 0 0 11%; }
#kontakt .box.info .zeiten table { width: 80%; margin: 3% 0 0 10%; }
#kontakt .box.info .zeiten td { color: #222; text-align: right; padding: 1%; }
#kontakt .box.info .zeiten td.tag { width: 10%; text-transform: uppercase; color: var(--c-muted); text-align: left; }

#kontakt .bg-right { z-index: 0; width: 25%; height: 100%; left: 75%; top: 0; position: relative; background: var(--c-dark); }

#kontakt .border.top     { z-index: 3; position: absolute; width: 3%; height: 2%; border-top: var(--c-light) solid 3px; border-right: var(--c-light) solid 3px; top: 12%; left: 84.5%; }
#kontakt .border.mtop    { z-index: 3; position: absolute; width: 3%; height: 2%; border-top: var(--c-light) solid 3px; border-right: var(--c-light) solid 3px; top: 50%; left: 84.5%; }
#kontakt .border.mbottom { z-index: 3; position: absolute; width: 3%; height: 2%; border-bottom: var(--c-light) solid 3px; border-right: var(--c-light) solid 3px; top: 48%; left: 84.5%; }
#kontakt .border.bottom  { z-index: 3; position: absolute; width: 3%; height: 2%; border-bottom: var(--c-light) solid 3px; border-right: var(--c-light) solid 3px; top: 86%; left: 84.5%; }

/* ============================================================
   Footer
   ============================================================ */
#footer {
  margin-top: 2%; width: 100%; height: 12%;
  display: flex; justify-content: center; align-items: center; flex-direction: row;
  background: var(--c-dark);
}
#footer p { padding: 4%; color: #ccc; text-transform: uppercase; }
#footer button { text-transform: uppercase; padding: 1%; color: #fff; font-size: 0.9vw; font-family: 'Slabo 27px', serif; }
#footer button:hover { text-decoration: underline; }

/* ============================================================
   Toast
   ============================================================ */
#toast-container {
  position: fixed; top: 1rem; right: 1rem; z-index: 999;
  display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none;
}
.toast {
  background: #fff; color: #1f1f1f;
  padding: .9rem 1.2rem; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  font-family: 'Titillium Web', sans-serif; font-size: .95rem;
  min-width: 220px; max-width: 360px;
  border-left: 4px solid var(--c-accent);
  opacity: 0; transform: translateX(20px);
  transition: opacity .2s, transform .2s;
  pointer-events: auto;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.success { border-left-color: #36a657; }
.toast.error   { border-left-color: #d33; }
.toast.info    { border-left-color: var(--c-accent); }

/* ============================================================
   MOBILE
   ============================================================ */
@media only screen and (max-width: 800px) and (orientation: portrait) {

  p { font-size: 2.8vw; margin: 0; padding: 0; }
  h2 { font-size: 3.1vw; margin: 0; padding-left: 5px; }
  h3 { font-size: 3.1vw; margin: 0; padding: 0; letter-spacing: 0; }
  a { font-size: 2.8vw; margin: 0; padding: 0; }

  #msg-button, #msg-info { display: none; }
  .border { display: none; }

  #menu-iconbg { width: 100%; height: 10%; background-color: rgba(44,49,58,.95); top: 0; left: 0; }
  #menu-icon { width: 12%; height: 10%; top: 0; right: 2.5%; }
  #menu-font { top: 0; right: 16%; height: 10%; width: 20%; }
  #menu-font p { padding-top: 0; font-size: 4.2vw; }
  #arrow-down { display: none; }
  #sectionname { display: none; }

  /* Pfeil (Zurück / Hochscrollen) ist in mobile generell unsichtbar. */
  #arrow { display: none !important; }

  /* In mobile: bei offener Unterseite bleibt der Burger sichtbar UND morpht zum X.
     Tap auf das X schließt die Unterseite (statt das Menü). */
  .subpage-open #menu-icon { opacity: 1; transform: none; pointer-events: auto; }
  .subpage-open #menu-font { opacity: 0; }
  .subpage-open #menu-icon .line-2,
  .subpage-open #menu-icon .line-3 { transform: scaleX(0); }
  .subpage-open #menu-icon .line-1 { transform: rotate(45deg); }
  .subpage-open #menu-icon .line-4 { transform: rotate(135deg); }

  body { position: relative; height: 100%; overflow: scroll; width: 100%; }
  .site { overflow: initial; position: relative; -webkit-overflow-scrolling: touch; }

  .subpage-impressum, .subpage-datenschutz { padding-top: 18%; -webkit-overflow-scrolling: touch; }
  .subpage-impressum a, .subpage-datenschutz a { font-size: 2.8vw; }
  .subpage-impressum h3, .subpage-datenschutz h3 { padding-top: 1%; width: 90%; margin-left: 5%; }
  .subpage-impressum p, .subpage-datenschutz p { padding-bottom: 1%; width: 90%; margin-left: 5%; font-size: 2.8vw; }
  .subpage-impressum .zw-strich, .subpage-datenschutz .zw-strich { height: 5px; width: 90%; margin: 0 5% 1%; }

  .subpage-sparte { -webkit-overflow-scrolling: touch; }
  .subpage-sparte .line { display: none; }
  .subpage-sparte .bg-sparte { height: 25%; width: 90%; top: 15%; left: 5%; }
  .subpage-sparte .bg-header { padding-bottom: 2%; margin-bottom: 30%; height: 10%; width: 50%; left: 25%; top: 10%; }
  .subpage-sparte .bg-header .zw-strich { width: 18%; height: 3px; margin: 3% 41%; }
  .subpage-sparte .box.left, .subpage-sparte .box.right { margin: 7% 5%; width: 90%; }
  .subpage-sparte .box-header { width: 50%; height: 10%; padding: 1%; }
  .subpage-sparte .box p { padding: 4% 4% 15%; font-size: 3.2vw; }
  .subpage-sparte .box-header.left, .subpage-sparte .box-header.right { margin: -16% 25% 15%; }
  .subpage-sparte .box-header .zw-strich { width: 18%; height: 3px; margin: 3% 41%; }

  #startseite .page { margin: 0; padding: 0; position: relative; top: 0; left: 0; }
  #startseite .bg-box { display: none; }
  #startseite .bg-team { position: absolute; height: 30%; width: 90%; left: 5%; top: 40%; background-position: center top; }
  #startseite .textbox { position: absolute; height: 15%; width: 55%; top: 65%; left: 22.5%; justify-content: center; }
  #startseite .textbox h2 { margin-top: 4%; font-size: 2.6vw; }
  #startseite .textbox p { margin-bottom: 4%; font-size: 2.4vw; }
  #startseite .zw-strich { width: 20%; height: 3px; margin: 0 40%; }
  #startseite .logo { position: absolute; height: 20%; width: 50%; top: 15%; left: 25%; }
  #startseite .me { background-image: url('../images/memittig.svg'); background-position: center; float: none; width: 60%; height: 60%; margin: 0 20%; padding: 0; }

  .bg-box.left { display: none; }

  #uberuns .text { width: 90%; height: 70%; top: 15%; left: 5%; }
  #uberuns .text h3 { font-size: 3.4vw; text-align: center; }
  #uberuns .text p { margin-top: 5%; font-size: 2.8vw; text-align: center; }

  .sparte-section .bg-sparte { height: 60%; width: 90%; top: 5%; left: 5%; }
  .sparte-section .textbox { height: 35%; width: 55%; top: 55%; left: 22.5%; }
  .sparte-section .zw-strich { width: 20%; height: 3px; margin: 0 40%; }
  .sparte-section .overlay .button { display: none; }
  #gewerbe .me-logo { display: none; }

  #team { width: 100%; height: 65%; }
  #team .box { height: 30%; padding: 0; width: 42.5%; margin: 2% 2.5%; }
  #team .content { width: 100%; height: 100%; top: 0; background: var(--c-dark); padding-top: 2%; }
  #team .box h3 { font-size: 3.1vw; letter-spacing: 0; }
  #team .box p { font-size: 2.6vw; }
  #team .box .zw-strich { width: 20%; height: 3px; margin: 6% 40%; }
  #team .portrait { height: 50%; }
  #team .email { display: none; }

  /* Erste Kachel: volle Breite, horizontales Banner-Layout */
  #team .box.leesemann {
    width: 90%; height: 20%; padding: 0% 2%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
      "portrait ."
      "portrait name"
      "portrait strich"
      "portrait role"
      "portrait .";
    column-gap: 5%;
  }
  #team .box.leesemann .portrait {
    grid-area: portrait; width: 38.25vw; height: 85%; margin: 0;
    align-self: center;
  }
  #team .box.leesemann h3        { grid-area: name;   margin: 0; text-align: left; }
  #team .box.leesemann .zw-strich { grid-area: strich; margin: 3% 0; width: 25%; }
  #team .box.leesemann p         { grid-area: role;   text-align: left; }

  #kontakt { width: 100%; height: 100%; background: var(--c-dark); }
  #kontakt .content { width: 90%; height: 80%; top: 5%; left: 5%; }
  #kontakt .box.info { margin: 0; width: 100%; height: 50%; border: 0; }
  #kontakt .box.map { width: 100%; height: 50%; border: 0; border-top: 25px solid var(--c-dark); }

  #kontakt .box.info .kontakt table { width: 90%; margin: 14% 5% 0; }
  #kontakt .box.info .kontakt td { padding: 8% 0; }
  #kontakt .box.info .kontakt td.nummer { font-family: 'Roboto', sans-serif; font-size: 3vw; color: #222; }
  #kontakt .box.info .kontakt td.nummer a { font-size: 3vw; }
  #kontakt .box.info .kontakt td.icon { font-size: 4vw; }

  #kontakt .box.info .zeiten p { margin: -5% 0 0 5%; }
  #kontakt .box.info .zeiten table { width: 90%; margin: 5%; }
  #kontakt .box.info .zeiten td { font-size: 3vw; width: 40%; margin: 0; padding: 0; }
  #kontakt .box.info .zeiten td.tag { width: 25%; font-size: 2.8vw; margin: 0; padding: 0; }

  #kontakt .border { display: none; }
  #kontakt .bg-right { display: none; }
  #kontakt .zw-strich { display: none; }

  #footer { width: 90%; height: 8%; text-align: center; }
  #footer p { padding: 2%; font-size: 2.4vw; }
  #footer button { padding: 1%; font-size: 2.4vw; }

  #menu .menu-nav { margin: 4%; width: 85%; font-size: 6.5vw; }
  #menu .menu-nav.header { font-size: 7.5vw; }
  #menu .zw-strich { width: 85%; height: 6px; margin: 0 7.5%; }
  #menu-bg { background-color: rgba(44,49,58,.95); }

  /* Mobile dialog: full-screen */
  .formular { width: 100vw; height: 100vh; }
  .form-shell { width: 100%; height: 100%; top: 0; left: 0; }
  .formular-termin .form-shell, .formular-schaden .form-shell, .formular-evb .form-shell { width: 100%; height: 100%; top: 0; left: 0; }
  .formular h2 { font-size: 3.7vw; }
  .formular p  { padding: 4% 6%; }
  .form-header { margin-top: 0; width: 100%; height: 10%; }
  .form-content { width: 100%; height: 90%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
  .formular form { width: 92%; padding: 4%; }
  .formular input, .formular select { width: 46%; margin: 1% 2%; font-size: 3.1vw; min-height: 1.5em; border-radius: 0; }
  .formular textarea { width: 96%; margin: 1% 2%; font-size: 3.1vw; min-height: 1.5em; border-radius: 0; }
  .formular .submit, .formular .close { margin-top: 3%; font-size: 3.2vw; padding: 3% 8%; }
  .formular .datenschutzbox { padding-bottom: 10%; }
  .formular .datenschutzbox input { margin: 3% 4% 0 2%; border: 2px solid var(--c-dark); }
}