/* MiMi · Mieterhöhung im Miteinander · Patock ImmoPlus (Orange #FF7D0F) */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --orange: #FF7D0F;
  --orange-dunkel: #E96D05;
  --blau: #0091C8;
  --ink: #1A1A1A;
  --grau: #595959;
  --orange-hell: #FFF1E6;
  --blau-hell: #E6F4FA;
  --linie: #E3E7EA;
  --bg: #FFFFFF;
  --radius: 16px;
  --sf: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --hf: "Century Gothic", "Segoe UI", system-ui, sans-serif;
}
html { scroll-behavior: smooth; }
body { font-family: var(--sf); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--orange-dunkel); }
.container { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* Kopf */
.hdr { border-bottom: 1px solid var(--linie); background: #fff; }
.hdr::after { content: ''; display: block; height: 3px; background: var(--orange); }
.hdr-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.hdr-logo { height: 40px; width: 115px; max-width: none; flex-shrink: 0; }
.hdr-claim { font-size: 13px; color: var(--grau); }

/* Hero */
.hero { background: linear-gradient(180deg, var(--orange-hell) 0%, #fff 100%); padding: 38px 0 0; }
.hero-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 28px; align-items: center; }
.welcome-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--linie); border-radius: 999px; padding: 8px 18px; margin-bottom: 16px; box-shadow: 0 6px 18px rgba(255, 125, 15, .12); }
.welcome-chip b { color: var(--orange-dunkel); }
.welcome-chip .winken { font-size: 18px; display: inline-block; animation: winken 2.2s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes winken { 0%, 55%, 100% { transform: rotate(0); } 60% { transform: rotate(16deg); } 70% { transform: rotate(-8deg); } 80% { transform: rotate(14deg); } 90% { transform: rotate(-4deg); } }
.hero h1 { font-family: var(--hf); font-size: clamp(28px, 4.6vw, 44px); line-height: 1.12; letter-spacing: -.02em; margin-bottom: 14px; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero .lead { font-size: clamp(15px, 2vw, 18px); color: var(--grau); margin-bottom: 24px; }
.hero-foto { text-align: center; align-self: end; }
.hero-foto img { max-height: 350px; width: auto; margin: 0 auto; display: block; filter: drop-shadow(0 14px 30px rgba(26, 26, 26, .18)); }
.foto-name { display: inline-block; background: #fff; border: 1px solid var(--linie); border-radius: 999px; padding: 6px 16px; font-size: 12.5px; font-weight: 600; color: var(--grau); margin: -18px auto 14px; position: relative; box-shadow: 0 6px 16px rgba(26, 26, 26, .10); }
.foto-name b { color: var(--ink); }
@media (max-width: 720px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 8px; }
  .hero-foto img { max-height: 230px; }
}

/* Vertrauens-Punkte */
.trust { padding: 26px 0 8px; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.trust-item { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.trust-item .ico { font-size: 20px; flex-shrink: 0; }

/* Ablauf */
.ablauf { padding: 30px 0 10px; }
.ablauf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ablauf-step { text-align: center; padding: 16px 14px; }
.ablauf-step .nr { width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.ablauf-step h3 { font-size: 15.5px; margin-bottom: 4px; }
.ablauf-step p { font-size: 13.5px; color: var(--grau); }

/* Formular-Karte */
.form-sektion { padding: 18px 0 40px; }
.form-card { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 14px 44px rgba(26, 26, 26, .08); padding: 26px clamp(18px, 4vw, 38px) 32px; }
.form-card h2 { font-family: var(--hf); font-size: 22px; margin-bottom: 4px; }
.form-card .sub { font-size: 14px; color: var(--grau); margin-bottom: 20px; }

/* Fortschritt */
.progress { height: 8px; background: var(--orange-hell); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.progress-balken { height: 100%; width: 50%; background: var(--orange); border-radius: 999px; transition: width .35s ease; }
.schritt-label { font-size: 12.5px; font-weight: 600; color: var(--grau); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 18px; }

/* Schritte */
/* min-inline-size: Browser-Standard fuer fieldset ist min-content, sonst sprengen lange Inhalte die Karte. */
fieldset.schritt { border: none; min-inline-size: 0; }
fieldset.schritt[hidden] { display: none; }
fieldset.schritt { animation: schritt-rein .3s ease; }
@keyframes schritt-rein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* Anliegen-Karten */
.objekt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.objekt-karte { position: relative; }
.objekt-karte input { position: absolute; opacity: 0; pointer-events: none; }
.objekt-karte label { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; border: 2px solid var(--linie); border-radius: 14px; padding: 22px 12px 18px; cursor: pointer; font-size: 14.5px; font-weight: 600; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.objekt-karte label .ico { font-size: 38px; line-height: 1; }
.objekt-karte label .unter { font-size: 12.5px; font-weight: 400; color: var(--grau); }
.objekt-karte label:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(255, 125, 15, .16); }
.objekt-karte input:checked + label { border-color: var(--orange); background: var(--orange-hell); box-shadow: inset 0 0 0 1px var(--orange); }
.objekt-karte input:focus-visible + label { outline: 3px solid var(--orange-hell); }

/* Eingaben */
.feld-label { display: block; font-size: 14px; font-weight: 600; margin: 16px 0 8px; }
.feld-label .opt { font-weight: 400; color: var(--grau); }
.eingabe, textarea.eingabe { width: 100%; border: 1.5px solid var(--linie); border-radius: 10px; padding: 12px 14px; font-family: var(--sf); font-size: 15px; color: var(--ink); background: #fff; transition: border-color .15s; }
.eingabe:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-hell); }
textarea.eingabe { min-height: 100px; resize: vertical; }
.zeile-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .zeile-2 { grid-template-columns: 1fr; } }

/* Honeypot unsichtbar */
.hp-feld { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }

/* Schritt-Navigation */
.schritt-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.btn-zurueck { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; cursor: pointer; font-family: var(--sf); font-size: 14.5px; font-weight: 600; color: var(--grau); padding: 10px 14px; border-radius: 999px; transition: color .15s, background .15s; }
.btn-zurueck:hover { color: var(--ink); background: var(--orange-hell); }

/* Buttons: Vollton Orange (keine Verlaeufe in Buttons) */
.btn-senden { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: none; cursor: pointer; border-radius: 999px; padding: 16px 34px; font-family: var(--sf); font-size: 17px; font-weight: 700; color: #fff; text-decoration: none; background: var(--orange); box-shadow: 0 12px 30px rgba(255, 125, 15, .32); transition: transform .15s, background .15s, box-shadow .15s; }
.btn-senden:hover { transform: translateY(-2px); background: var(--orange-dunkel); box-shadow: 0 16px 38px rgba(255, 125, 15, .42); }
.btn-breit { width: 100%; }
.senden-hinweis { font-size: 12.5px; color: var(--grau); margin-top: 12px; text-align: center; }
.senden-hinweis a { color: var(--grau); }

/* Fehler-Banner */
.banner-fehler { display: none; background: #FDECEC; border: 1px solid #F5B5B5; color: #8F2222; border-radius: 12px; padding: 12px 16px; font-size: 14px; margin-bottom: 18px; }
.banner-fehler.sichtbar { display: block; }

/* Danke-Seite */
.danke { min-height: 62vh; display: flex; align-items: center; padding: 60px 0; text-align: center; background: linear-gradient(180deg, var(--orange-hell) 0%, #fff 70%); }
.danke-inner { max-width: 640px; margin: 0 auto; padding: 0 20px; }
.danke-check { width: 92px; height: 92px; margin: 0 auto 24px; border-radius: 50%; background: var(--orange); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 18px 44px rgba(255, 125, 15, .38); }
.danke-check svg { width: 44px; height: 44px; }
.danke h1 { font-family: var(--hf); font-size: clamp(28px, 5vw, 42px); margin-bottom: 14px; letter-spacing: -.02em; }
.danke .lead { font-size: 17px; color: var(--grau); margin-bottom: 10px; }
.danke .hinweis-karte { margin: 26px auto 0; background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 18px 22px; font-size: 14.5px; text-align: left; display: flex; gap: 12px; align-items: flex-start; }
.danke .hinweis-karte .ico { font-size: 22px; }
.danke-aktionen { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.danke-aktionen .btn-senden { font-size: 18px; padding: 18px 44px; }
.danke-aktionen .neben-link { font-size: 14px; color: var(--grau); }

/* Bild-Sektion: So arbeitet MiMi */
.bildband { padding: 30px 0 10px; }
.bild-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: center; }
.bild-foto img { border-radius: 16px; box-shadow: 0 16px 40px rgba(26, 26, 26, .14); width: 100%; height: auto; }
.bild-text h2 { font-family: var(--hf); font-size: clamp(22px, 3.5vw, 30px); margin-bottom: 10px; }
.bild-text p { font-size: 15px; color: #333; margin-bottom: 12px; }
.bild-punkte { list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 0; }
.bild-punkte li { display: flex; gap: 10px; font-size: 14.5px; }
.bild-punkte li::before { content: '✔'; color: var(--orange); font-weight: 700; flex-shrink: 0; }
@media (max-width: 780px) { .bild-grid { grid-template-columns: 1fr; } }

/* FAQ */
.faq { padding: 26px 0 40px; }
.faq-inner { max-width: 720px; margin: 0 auto; }
.faq h2 { font-family: var(--hf); font-size: clamp(22px, 3.5vw, 28px); text-align: center; margin-bottom: 18px; }
.faq details { background: #fff; border: 1px solid var(--linie); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; font-size: 15px; font-weight: 600; transition: background .15s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--orange-hell); }
.faq summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--orange); flex-shrink: 0; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 18px 15px; font-size: 14.5px; color: #333; }

/* Netzwerk: einheitlicher Seiten-Verbund, auf JEDER Patock-Seite identisch.
   Reihenfolge: Ankauf (Orange) · Patock Gruppe (Blau) · Stammtisch (Gruen) · MiMi (Beere). */
.netzwerk { padding: 34px 0 56px; background: linear-gradient(180deg, #fff 0%, #FFF1E6 100%); }
.netzwerk h2 { font-family: var(--hf); font-size: clamp(22px, 3.5vw, 28px); text-align: center; margin-bottom: 6px; }
.netzwerk .netz-sub { text-align: center; font-size: 14.5px; color: #595959; max-width: 560px; margin: 0 auto 22px; }
.netz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .netz-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .netz-grid { grid-template-columns: 1fr; } }
.netz-karte { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 2px solid #E3E7EA; border-top-width: 5px; border-radius: 16px; padding: 20px 20px 18px; text-decoration: none; color: #16191C; transition: transform .18s, box-shadow .18s; position: relative; }
.netz-karte:hover { transform: translateY(-4px); }
.netz-karte .ico { font-size: 32px; line-height: 1; }
.netz-karte h3 { font-size: 16.5px; }
.netz-karte p { font-size: 13.5px; color: #595959; flex: 1; }
.netz-karte .netz-cta { font-size: 14px; font-weight: 700; }
.nk-ankauf { border-top-color: #FF7D0F; }
.nk-ankauf .netz-cta { color: #FF7D0F; }
.nk-ankauf:hover { box-shadow: 0 14px 34px rgba(255, 125, 15, .18); }
.nk-ankauf .hier-badge { background: #FF7D0F; }
.nk-gruppe { border-top-color: #0091C8; }
.nk-gruppe .netz-cta { color: #0091C8; }
.nk-gruppe:hover { box-shadow: 0 14px 34px rgba(0, 145, 200, .18); }
.nk-gruppe .hier-badge { background: #0091C8; }
.nk-stammtisch { border-top-color: #25D366; }
.nk-stammtisch .netz-cta { color: #128C7E; }
.nk-stammtisch:hover { box-shadow: 0 14px 34px rgba(37, 211, 102, .20); }
.nk-stammtisch .hier-badge { background: #128C7E; }
.nk-mimi { border-top-color: #C2185B; }
.nk-mimi .netz-cta { color: #C2185B; }
.nk-mimi:hover { box-shadow: 0 14px 34px rgba(194, 24, 91, .18); }
.nk-mimi .hier-badge { background: #C2185B; }
.hier-badge { position: absolute; top: -11px; right: 14px; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; }
.domain-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.domain-chips span { font-size: 12px; font-weight: 600; color: #E96D05; background: #FFF1E6; border: 1px solid #f5d9bd; border-radius: 999px; padding: 4px 10px; }

/* Fuß */
.ft { border-top: 1px solid var(--linie); padding: 22px 0 26px; }
.ft-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--grau); }
.ft a { color: var(--grau); text-decoration: none; }
.ft a:hover { color: var(--orange-dunkel); }

/* Rechtstexte */
.recht { padding: 44px 0 60px; }
.recht .inner { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.recht h1 { font-family: var(--hf); font-size: 30px; margin-bottom: 20px; }
.recht h2 { font-size: 17px; margin: 26px 0 8px; }
.recht p, .recht li { font-size: 15px; color: #333; }
.recht ul { padding-left: 22px; }

/* Kompakte Verbund-Navigation im Seitenkopf (zierliche Pillen, aktive Seite gefuellt) */
.topnav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.topnav a { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1; text-decoration: none; border: 1.5px solid #E3E7EA; border-radius: 999px; padding: 5px 10px; background: #fff; transition: transform .12s, box-shadow .12s; white-space: nowrap; }
.topnav a:hover { transform: translateY(-1px); }
.tn-ankauf { color: #E96D05; border-color: #F5D0AE; }
.tn-ankauf:hover { box-shadow: 0 4px 10px rgba(255,125,15,.22); }
.tn-gruppe { color: #0091C8; border-color: #BFE3F2; }
.tn-gruppe:hover { box-shadow: 0 4px 10px rgba(0,145,200,.22); }
.tn-stammtisch { color: #128C7E; border-color: #BDE8D2; }
.tn-stammtisch:hover { box-shadow: 0 4px 10px rgba(37,211,102,.22); }
.tn-mimi { color: #C2185B; border-color: #EEC3D6; }
.tn-mimi:hover { box-shadow: 0 4px 10px rgba(194,24,91,.22); }
.topnav a.aktiv, .topnav a.aktiv:hover { color: #fff; }
.tn-ankauf.aktiv { background: #FF7D0F; border-color: #FF7D0F; }
.tn-gruppe.aktiv { background: #0091C8; border-color: #0091C8; }
.tn-stammtisch.aktiv { background: #128C7E; border-color: #128C7E; }
.tn-mimi.aktiv { background: #C2185B; border-color: #C2185B; }
.topnav .hier { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.28); border-radius: 999px; padding: 2px 7px; }
@media (max-width: 920px) {
  .topnav a .lbl, .topnav .hier { display: none; }
  .topnav a { padding: 5px 7px; font-size: 14px; }
}