/*
 * Claude 2026-07-20: dmi_de-Redesign Schritt 6 - Textseiten (Wissen, Über uns, Kontakt)
 * auf das neue Design-System gehoben. War die rote Realia-"Aufhuebschung" (2026-07-19);
 * jetzt Tokens/Serif/Welt-Akzent aus dmi-base.css (global geladen). Rein ADDITIV; nur auf
 * diesen Seiten via use_stylesheet. Inhalte/Struktur der Templates unveraendert - nur Optik.
 * Standard-Akzent = Denkmal (gruen); alle Werte lesen var(--accent…).
 */

.dmi-textpage { color:var(--ink-soft); }

/* ---- Ueberschriften: Serif, ruhige Hierarchie ---- */
.dmi-textpage h1 { font-family:var(--serif); font-weight:600; color:var(--ink); font-size:32px; line-height:1.15; margin:6px 0 24px; }
.dmi-textpage h2 { font-family:var(--serif); font-weight:600; color:var(--accent-deep); font-size:26px; line-height:1.2; margin:34px 0 12px; padding-bottom:10px; border-bottom:2px solid var(--edge); }
.dmi-textpage h3 { font-family:var(--serif); font-weight:600; color:var(--accent-deep); font-size:20px; line-height:1.3; margin:26px 0 10px; }
.dmi-textpage h4 { font-weight:700; color:var(--ink); font-size:16px; margin:20px 0 8px; }
.dmi-textpage h2:first-child, .dmi-textpage h3:first-child { margin-top:4px; }

/* ---- Fliesstext ---- */
.dmi-textpage p, .dmi-textpage li, .dmi-textpage address, .dmi-textpage td { line-height:1.75; }
.dmi-textpage p { margin:0 0 16px; }
.dmi-textpage address { font-style:normal; }
.dmi-textpage a { color:var(--accent-deep); }
.dmi-textpage a:hover { color:var(--accent); }
.dmi-textpage .dmi-lead { font-size:17px; line-height:1.7; color:var(--ink); }

/* ---- Abschnitts-Karten ---- */
.dmi-textpage .property-detail {
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:26px 32px; margin-bottom:24px !important; box-shadow:var(--sh-sm);
}
.dmi-textpage .property-detail .divider { display:none; }
.dmi-textpage .property-detail ul { margin:0 0 4px; }
.dmi-textpage .property-detail li { margin-bottom:6px; }

/* ============================ Pagehead (dunkles Titelband mit Bild) ============================ */
.dmi-hero { position:relative; overflow:hidden; background-color:#2b2b25; background-size:cover; background-position:center; color:#fff; margin-bottom:34px; }
.dmi-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,26,23,.74) 0%, rgba(20,26,23,.5) 55%, rgba(20,26,23,.32) 100%); }
.dmi-hero .container { position:relative; padding-top:48px; padding-bottom:44px; }
.dmi-hero .dmi-crumb { color:#dcdcd2; font-size:12.5px; margin:0 0 12px; }
.dmi-hero .dmi-crumb a { color:#dcdcd2; text-decoration:none; }
.dmi-hero .dmi-crumb a:hover { color:#fff; }
.dmi-hero h1 { font-family:var(--serif); font-weight:600; color:#fff; font-size:clamp(30px,4.6vw,46px); line-height:1.12; margin:0; padding:0; border:0; text-shadow:none; }
.dmi-hero .dmi-hero-sub { color:#e7e7dd; font-size:18px; margin:12px 0 0; text-shadow:none; }
/* Claude 2026-07-21 (Rose): Hero-Telefon oben rechts IM Hero verankert (vorher bottom:-24px -> ragte
   heraus + wurde von overflow:hidden abgeschnitten). Ab <992px flieszt es unter den Text, <768px aus. */
.dmi-hero .dmi-hero-phone {
  position:absolute; top:44px; right:15px; z-index:2; background:#fff; color:var(--accent-deep);
  padding:11px 18px; border-radius:var(--r-sm); box-shadow:var(--sh-sm); font-weight:700; font-size:17px;
  white-space:nowrap; font-variant-numeric:tabular-nums; display:inline-flex; align-items:center;
}
.dmi-hero .dmi-hero-phone .glyphicon { color:var(--accent); margin-right:8px; }
@media (max-width:991px){ .dmi-hero .dmi-hero-phone { position:static; margin-top:18px; } }
@media (max-width:767px){ .dmi-hero .dmi-hero-phone { display:none; } }

/* ============================ Wissen: TOC-Sidebar ============================ */
#info-sidebar .info-docs-sidebar {
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:6px 0; margin-bottom:24px; box-shadow:var(--sh-sm);
}
#info-sidebar .info-docs-sidenav { margin:0; padding:0; }
#info-sidebar .info-docs-sidenav > li > a {
  display:block; font-family:var(--serif); color:var(--accent-deep); font-weight:600; font-size:14.5px; line-height:1.3;
  padding:10px 16px; border-left:3px solid transparent; border-radius:0;
}
#info-sidebar .info-docs-sidenav > li > a:hover,
#info-sidebar .info-docs-sidenav > li > a:focus,
#info-sidebar .info-docs-sidenav > li.active > a {
  background:var(--tint); border-left-color:var(--accent); color:var(--accent-deep); text-decoration:none;
}
#info-sidebar .info-docs-sidenav .nav > li > a {
  color:var(--slate); font-size:13px; font-weight:normal; padding:5px 16px 5px 30px; border-left:3px solid transparent;
}
#info-sidebar .info-docs-sidenav .nav > li > a:hover,
#info-sidebar .info-docs-sidenav .nav > li.active > a { color:var(--accent-deep); background:#fbfaf7; border-left-color:var(--edge); }

#info-nav, #info-nav.affix, #info-nav.affix-top, #info-nav.affix-bottom {
  position: sticky !important; top: 76px !important; bottom: auto !important; width: auto !important;
}
@media (min-width: 992px) {
  body.info .container > .row { display: flex; flex-wrap: wrap; }
}

/* "Gute Argumente"-Liste (Icon + Text ausgerichtet) */
.dmi-textpage .itemlist.highlight .listitem { display: flex; align-items: flex-start; }
.dmi-textpage .itemlist.highlight .listitem > .glyphicon { color: var(--accent); margin: 3px 10px 0 0; flex: 0 0 auto; font-size: 12px; }
.dmi-textpage .itemlist.highlight .listitem > div { flex: 1 1 auto; }
.dmi-textpage .itemlist.highlight .listitem > .list-group-item-heading { margin: 0; }

/* Tabellen (Vergleich/Kalkulation) */
.dmi-textpage .table > thead > tr > th, .dmi-textpage .table > thead > tr.success > th { background:var(--tint); color:var(--accent-deep); border-color:var(--edge); font-family:var(--serif); font-weight:600; }
.dmi-textpage .table-bordered, .dmi-textpage .table-bordered > tbody > tr > td, .dmi-textpage .table-bordered > tbody > tr > th, .dmi-textpage .table-bordered > thead > tr > th { border-color:var(--line); }
.dmi-textpage .table-striped > tbody > tr:nth-of-type(odd) { background:#fbfaf7; }
.dmi-textpage .table > tbody > tr > th { color:var(--ink); }

/* ============================ Sidebar-Widgets (Wissen/Über uns) ============================ */
.dmi-side-widget {
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 20px;
  margin-bottom:22px; box-shadow:var(--sh-sm);
}
.dmi-side-widget h4 {
  margin:0 0 12px; font-family:var(--serif); font-weight:600; color:var(--accent-deep); font-size:17px;
  padding-bottom:9px; border-bottom:1px solid var(--edge);
}
.dmi-side-widget p { font-size:13.5px; line-height:1.55; color:var(--slate); margin:0 0 14px; }
.dmi-side-widget ul { list-style:none; padding:0; margin:0 0 15px; }
.dmi-side-widget ul li { position:relative; padding:6px 0 6px 22px; font-size:13.5px; color:var(--ink-soft); line-height:1.4; }
.dmi-side-widget ul li::before { content:""; position:absolute; left:0; top:12px; width:8px; height:8px; border-radius:2px; background:var(--accent); opacity:.85; }
.dmi-side-btn {
  display:block; text-align:center; background:var(--accent); color:#fff; text-decoration:none;
  padding:11px 14px; border-radius:var(--r-sm); font-weight:700; font-size:14px;
}
.dmi-side-btn:hover, .dmi-side-btn:focus { background:var(--accent-deep); color:#fff; text-decoration:none; }
.dmi-pflege-teaser { --accent:var(--pf); --accent-deep:var(--pf-deep); --tint:var(--pf-tint); --edge:var(--pf-edge); }

/* ============================ Kontaktformular (Wir freuen uns …) ============================ */
.dmi-textpage .dmi-eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:700; color:var(--accent); margin:0 0 10px; }
.dmi-textpage .dmi-eyebrow-bar { height:3px; width:100%; background:var(--edge); border-radius:2px; margin:0 0 24px; position:relative; overflow:hidden; }
.dmi-textpage .dmi-eyebrow-bar::before { content:''; position:absolute; left:0; top:0; bottom:0; width:40%; background:var(--accent); border-radius:2px; }
.dmi-textpage .cform input[type=text],
.dmi-textpage .cform input[type=email],
.dmi-textpage .cform input[type=tel],
.dmi-textpage .cform textarea,
.dmi-textpage .cform select {
  border:1px solid #d9d5cc; border-radius:var(--r-sm); padding:11px 13px; font-size:15px; width:100%; background:#fbfaf7;
  transition:border-color .15s, box-shadow .15s;
}
.dmi-textpage .cform input:focus,
.dmi-textpage .cform textarea:focus,
.dmi-textpage .cform select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,107,91,.14); outline:none; background:#fff; }
/* Claude 2026-07-21 (Rose): select2 nur noch im Filter -> /kontakt native Selects; Hoehe wie Inputs
   + eigener Pfeil statt Browser-Default. Schlaegt Realias .cform .form-control{height:32px}. */
.dmi-textpage .cform select { height:44px; -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:38px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path fill='none' stroke='%238a8578' stroke-width='2' d='M1 1l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; }
/* Claude 2026-07-21 (Rose): .cform.cform-lg .form-control (bootstrap: border-radius:0, height:40) hat
   hoehere Spezifitaet als die obige select-Regel -> Selects wurden eckig/40px. Hier mit .form-control
   gleiche Klassenzahl + select-Element (0,3,1) und spaeter im Load -> gewinnt (Rundung + Hoehe zurueck). */
.dmi-textpage .cform select.form-control { height:44px; border-radius:var(--r-sm); }
.dmi-textpage .cform label { font-weight:600; color:var(--ink-soft); margin-bottom:5px; }
.dmi-textpage .cform .btn[type=submit],
.dmi-textpage .cform button[type=submit] {
  background:var(--accent); border-color:var(--accent); color:#fff; border-radius:var(--r-sm);
  padding:13px 36px; font-weight:700; font-size:15px;
}
.dmi-textpage .cform button[type=submit]:hover { background:var(--accent-deep); border-color:var(--accent-deep); }

/* ============================ Team / Ansprechpartner (Über uns) ============================ */
.dmi-team { display:flex; flex-wrap:wrap; gap:24px 20px; list-style:none; margin:22px 0 0; padding:0; }
.dmi-team__card { width:calc(25% - 15px); text-align:center; margin:0; }
.dmi-team__photo {
  width:100%; aspect-ratio:300/340; overflow:hidden; border-radius:12px;
  background:#e9e4da; margin-bottom:12px; box-shadow:var(--sh-sm);
}
.dmi-team__photo img { width:100%; height:100%; object-fit:cover; display:block; }
.dmi-team__name { display:block; font-family:var(--serif); font-weight:600; color:var(--ink); font-size:17px; line-height:1.25; }
.dmi-team__role { display:block; color:var(--slate); font-size:12.5px; margin-top:2px; }
.dmi-team-section > p { color:var(--slate); margin-bottom:4px; }
@media (max-width:991px){ .dmi-team__card { width:calc(33.333% - 14px); } }
@media (max-width:600px){ .dmi-team { gap:16px 14px; } .dmi-team__card { width:calc(50% - 7px); } }

/* ============================ Kontaktdaten-Box (Kontakt) ============================ */
.dmi-contactbox { background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm); overflow:hidden; }
.dmi-contactbox .panel-heading { background:var(--tint); border-bottom:1px solid var(--edge); padding:15px 18px; }
.dmi-contactbox .panel-heading .panel-title { font-family:var(--serif); font-weight:600; font-size:17px; color:var(--accent-deep); text-transform:none; letter-spacing:normal; }
.dmi-contactbox .panel-body { display:flex; flex-wrap:wrap; align-items:flex-start; padding:0 18px 8px; }
.dmi-contactbox .panel-body > [class*="col-"] { float:none; }
/* Claude 2026-07-21 (Rose, Klickdummy /kontakt): Zeilen wie .cbox .ic - 15px vertikal, erste Zeile
   ohne obere Linie (der Header hat schon eine border-bottom), Icon exakt zentriert. */
.dmi-contactbox .icon-box { display:flex; gap:14px; align-items:flex-start; padding:15px 0; margin:0; border-top:1px solid var(--line); width:100%; }
/* Claude 2026-07-21 (Rose): Realia-Defaults neutralisieren - margin-bottom:30px (zu grosse Luecke zur
   naechsten Zeile) raus; roter :hover auf dem Icon (bootstrap.css .icon-box(.icon-box-sm):hover .icon)
   auf Marken-Gruen statt Rot. */
.dmi-contactbox .icon-box:hover .icon, .dmi-contactbox .icon-box:focus .icon,
.dmi-contactbox .icon-box.icon-box-sm:hover .icon, .dmi-contactbox .icon-box.icon-box-sm:focus .icon { color:var(--accent); background:var(--tint); box-shadow:none; }
.dmi-contactbox .icon-box:first-of-type { border-top:0; }
.dmi-contactbox .icon-box .icon { width:40px; height:40px; border-radius:50%; background:var(--tint); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:16px; line-height:1; }
.dmi-contactbox .icon-box .icon .glyphicon { top:0; line-height:1; }
/* Claude 2026-07-21 (Rose, Klickdummy-Typografie): Icon->Text-Abstand runter (Realia .description-Margin),
   Heading 600 statt 700, Fliesstext 13px/400. */
.dmi-contactbox .icon-box.icon-box-sm .description { margin:0; }
.dmi-contactbox .panel-body .icon-box .icon-box-heading { font-family:var(--sans); font-size:13px; font-weight:600; color:var(--accent-deep); margin:0 0 2px; text-transform:none; }
.dmi-contactbox .icon-box-text { margin:0; font-size:13px; font-weight:400; color:var(--ink-soft); overflow-wrap:anywhere; word-break:break-word; }
/* Claude 2026-07-21 (Rose, Klickdummy /kontakt): Telefon/E-Mail als Link + "Direkt anrufen"-Button */
.dmi-contactbox .icon-box-text a { color:var(--accent-deep); text-decoration:none; font-weight:400; }
.dmi-contactbox .icon-box-text a:hover { text-decoration:underline; }
.dmi-contactbox .dmi-callbtn-wrap { width:100%; border-top:1px solid var(--line); padding-top:15px; margin-top:9px; }
.dmi-callbtn { display:block; text-align:center; padding:12px 16px; border:1px solid var(--accent); border-radius:var(--r-sm); color:var(--accent-deep); background:#fff; font-weight:700; font-size:14.5px; text-decoration:none; transition:background .15s, color .15s; }
.dmi-callbtn:hover, .dmi-callbtn:focus { background:var(--accent); color:#fff; text-decoration:none; }
.dmi-callbtn .glyphicon { margin-right:7px; font-size:13px; }

/* Claude 2026-07-21 (Rose, 1:1 Klickdummy): Kontakt-Formularkopf (Titel + Intro) + "Warum anfragen?"-Trustbox */
.dmi-textpage .dmi-form-title { font-family:var(--serif); font-weight:600; font-size:26px; color:var(--ink); margin:14px 0 8px; text-transform:none; letter-spacing:normal; }
.dmi-textpage .dmi-form-intro { color:var(--slate); font-size:15.5px; line-height:1.6; margin:0 0 22px; max-width:62ch; }
.dmi-trustbox { background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm); padding:18px 20px; margin-top:18px; }
.dmi-trustbox h4 { font-family:var(--serif); font-weight:600; font-size:17px; color:var(--ink); margin:0 0 12px; }
.dmi-trustbox ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.dmi-trustbox li { position:relative; padding-left:26px; font-size:14px; color:var(--ink-soft); line-height:1.45; }
.dmi-trustbox li::before { content:"\2713"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700; }
/* Claude 2026-07-21 (Rose): Datenschutz-Pflicht-Checkbox (contact[privacy]) - Styling.
   Realias ezmark ersetzt die Checkbox durch ein .ez-checkbox-Sprite -> dieses als CSS-Kaestchen
   stylen (gruen gefuellt im checked-Zustand). Faellt ezmark aus, greift die native input-Regel. */
.dmi-privacy { margin:10px 0 18px; }
.dmi-privacy label { display:block; position:relative; padding-left:30px; margin:0; font-weight:400; font-size:13.5px; line-height:1.55; color:var(--slate); text-transform:none; letter-spacing:normal; cursor:pointer; }
.dmi-privacy a { color:var(--accent-deep); font-weight:600; }
.dmi-privacy .required { color:#c0392b; }
.dmi-privacy input[type=checkbox] { position:absolute; left:0; top:1px; width:18px; height:18px; margin:0; accent-color:var(--accent); cursor:pointer; }
.dmi-privacy .ez-checkbox { position:absolute; left:0; top:1px; width:18px; height:18px; border:2px solid var(--line); border-radius:5px; background:#fff !important; background-image:none !important; cursor:pointer; transition:background .12s, border-color .12s; }
.dmi-privacy .ez-checkbox.ez-checked { background:var(--accent) !important; border-color:var(--accent); }
.dmi-privacy .ez-checkbox.ez-checked::after { content:""; position:absolute; left:5px; top:1px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.dmi-privacy.has-error .ez-checkbox, .dmi-privacy.has-error input[type=checkbox] { border-color:#c0392b; outline:2px solid rgba(192,57,43,.35); outline-offset:1px; }
.dmi-privacy-err { margin:6px 0 0 30px; }