/* ============================================================
   Mühle K – Industrial Menü + Seiten (CSS)
   Logo-Look: Beton-Grau BG, schwarze Schrift, rustikal
   ============================================================ */

/* ---- Sandwich-Menü: Plaketten (Beton-Grau) ---- */
.km-menu { background: #d4d2cf !important; padding: 0 !important; gap: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E") !important;
}
.kmm-head { padding: 90px 26px 20px; border-bottom: 2px solid #2a2522; }
.kmm-head-tag { display:block; font-family:'Anton',Impact,sans-serif; font-size:14px; letter-spacing:.22em; color:#2a2522; text-transform:uppercase; }
.kmm-head-sub { display:block; font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.32em; color:#6b6360; text-transform:uppercase; margin-top:4px; }

.kmm-plate {
  display:flex; align-items:center; gap:16px;
  width:calc(100% - 32px); margin:14px 16px 0; padding:18px 20px;
  background:#c8c5c1; border:1px solid #b0aca8; border-left:4px solid #2a2522;
  cursor:pointer; text-align:left; position:relative; overflow:hidden;
  box-shadow: 2px 2px 0 rgba(42,37,34,.12);
  transition:border-color .18s, background .18s, transform .12s, box-shadow .12s;
}
.kmm-plate:last-of-type { margin-bottom:4px; }
.kmm-plate::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 8px, transparent 8px 16px); pointer-events:none; }
.kmm-plate:hover { background:#bdb9b5; border-left-color:#14110f; transform:translate(2px,-2px); box-shadow:4px 4px 0 rgba(42,37,34,.18); }
.kmm-num { font-family:'Anton',Impact,sans-serif; font-size:13px; color:#8a807c; letter-spacing:.05em; }
.kmm-label { flex:1; font-family:'Anton',Impact,sans-serif; font-size:26px; letter-spacing:.02em; color:#1a1818; text-transform:uppercase; line-height:1; }
.kmm-arrow { font-size:20px; color:#8a807c; transition:color .18s, transform .18s; }
.kmm-plate:hover .kmm-arrow { color:#14110f; transform:translateX(4px); }

/* ---- Seiten-Panel ---- */
#pageBox { padding:0 !important; }
.kmp { font-family:'Oswald',sans-serif; color:#1a1818; position:relative;
  background-color:#d4d2cf;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
.kmp-x {
  position:absolute; top:16px; right:16px; z-index:5;
  width:42px; height:42px; border:1px solid #2a2522; border-radius:0;
  background:rgba(212,210,207,.85); color:#1a1818; font-size:24px; line-height:1; cursor:pointer;
  transition:background .16s;
}
.kmp-x:hover { background:#1a1818; color:#d4d2cf; }

/* Hero – betongrau, schwarze Schrift */
.kmp-hero { padding:46px 34px 34px; background:transparent; position:relative; overflow:hidden; border-bottom:2px solid #2a2522; }
.kmp-hero::after { content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.025) 0 11px, transparent 11px 22px); pointer-events:none; }
.kmp-tag { display:block; font-family:'Anton',Impact,sans-serif; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:#6b6360; margin-bottom:18px; }
.kmp-h1 { font-family:'Anton',Impact,sans-serif; font-size:clamp(38px,9vw,62px); line-height:.94; letter-spacing:.01em; text-transform:uppercase; color:#1a1818; margin:0; text-shadow:2px 2px 0 rgba(42,37,34,.1); }
.kmp-lead { font-family:'Oswald',sans-serif; font-weight:400; font-size:clamp(17px,4.5vw,21px); line-height:1.4; color:#3a3431; margin:18px 0 0; max-width:46ch; }
.kmp-addr { display:flex; align-items:flex-start; gap:9px; margin:20px 0 0; font-size:15px; color:#3a3431; }
.kmp-addr svg { width:17px; height:17px; stroke:#6b6360; fill:none; stroke-width:2; flex:0 0 auto; margin-top:2px; }

/* Content */
.kmp-content { padding:30px 34px 42px; }
.kmp-content p { font-family:'Oswald',sans-serif; font-weight:300; font-size:16.5px; line-height:1.72; color:#2a2522; margin:0 0 18px; }
.kmp-content p strong { font-weight:600; color:#14110f; }
.kmp-sec { display:block; font-family:'Anton',Impact,sans-serif; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#6b6360; margin:26px 0 16px; padding-bottom:9px; border-bottom:2px solid #2a2522; }

/* Foto (Geschichte) */
.kmp-photo { position:relative; width:100%; aspect-ratio:644/440; max-height:340px; overflow:hidden; background:#b0aca8; border-bottom:2px solid #2a2522; }
.kmp-photo img { width:100%; height:100%; object-fit:cover; filter:grayscale(.3) contrast(1.05) sepia(.08); }
.kmp-photo-cap { position:absolute; left:0; bottom:0; font-family:'Anton',Impact,sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#d4d2cf; background:rgba(20,17,15,.78); padding:7px 12px; }

/* Infos: Stat-Pullout – dunkler Akzent-Block */
.kmp-pullout { display:flex; gap:14px; margin:26px 0 26px; padding:24px 22px; background:#2a2522; border-left:4px solid #14110f; }
.kmp-stat { flex:1; text-align:center; }
.kmp-stat-num { display:block; font-family:'Anton',Impact,sans-serif; font-size:42px; line-height:1; color:#e8e5e2; }
.kmp-stat-lbl { display:block; font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#a09a96; margin-top:6px; }

/* Infos: Claim – dunkler Akzent-Block */
.kmp-claim { margin-top:30px; padding:30px 26px; background:#2a2522; border-left:4px solid #14110f; }
.kmp-claim-line { display:block; font-family:'Anton',Impact,sans-serif; font-size:clamp(24px,6vw,34px); line-height:1.06; text-transform:uppercase; color:#e8e5e2; }
.kmp-claim-line:nth-child(2){ color:#bdb9b5; }
.kmp-claim-line:nth-child(3){ color:#8a807c; }
.kmp-claim-sub { font-family:'Oswald',sans-serif; font-weight:300; font-size:15px; color:#bdb9b5; margin:16px 0 0; }

/* Kontakt: Personen */
.kmk-people { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
.kmk-person { border:1px solid #b0aca8; border-left:3px solid #2a2522; background:rgba(255,255,255,.25); padding:14px 16px; transition:border-color .18s, box-shadow .18s; }
.kmk-person:hover { border-left-color:#14110f; box-shadow:3px 3px 0 rgba(42,37,34,.12); }
.kmk-pname { font-family:'Oswald',sans-serif; font-weight:600; font-size:15px; margin:0 0 8px; color:#1a1818; }
.kmk-tel { display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:#2a2522; font-weight:500; font-size:14px; }
.kmk-tel svg { width:15px; height:15px; stroke:#2a2522; fill:none; stroke-width:2; }
.kmk-tel:hover { color:#000; }
.kmk-mail { display:flex; align-items:center; gap:10px; padding:13px 16px; border:1px solid #b0aca8; background:rgba(255,255,255,.25); margin-bottom:24px; text-decoration:none; color:#1a1818; font-family:'Oswald',sans-serif; font-weight:500; transition:background .16s; }
.kmk-mail:hover { background:rgba(255,255,255,.5); }
.kmk-mail svg { width:18px; height:18px; stroke:#2a2522; fill:none; stroke-width:2; }
.kmk-map { width:100%; aspect-ratio:16/10; border:2px solid #2a2522; margin-bottom:26px; display:block; filter:grayscale(.15); }

/* Kontakt: Formular */
.kmk-form { display:grid; gap:13px; }
.kmk-field label { display:block; font-family:'Anton',Impact,sans-serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#6b6360; margin-bottom:6px; }
.kmk-field input, .kmk-field textarea { width:100%; box-sizing:border-box; padding:12px 14px; border:1px solid #a8a4a0; font:inherit; font-family:'Oswald',sans-serif; font-size:15px; background:rgba(255,255,255,.45); color:#1a1818; transition:border-color .16s, background .16s; }
.kmk-field input:focus, .kmk-field textarea:focus { outline:none; border-color:#2a2522; background:#fff; }
.kmk-field textarea { resize:vertical; min-height:110px; }
.kmk-row { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.kmk-submit { margin-top:6px; height:52px; border:0; background:#1a1818; color:#e8e5e2; font-family:'Anton',Impact,sans-serif; font-size:15px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:background .16s, transform .1s; }
.kmk-submit:hover { background:#2a2522; }
.kmk-submit:active { transform:translateY(1px); }
.kmk-submit:disabled { opacity:.55; cursor:default; }
.kmk-note { font-family:'Oswald',sans-serif; font-size:14px; text-align:center; margin:4px 0 0; padding:12px; }
.kmk-note.ok { background:#dde8dd; color:#2c6b2c; }
.kmk-note.err { background:#ecd8d8; color:#9a2c2c; }

@media (max-width:560px){
  .kmk-people, .kmk-row { grid-template-columns:1fr; }
  .kmp-hero, .kmp-content { padding-left:24px; padding-right:24px; }
}

/* Mail-Link in Personenkarte */
.kmk-tel-mail { margin-top:8px; font-size:13px; word-break:break-all; }
.kmk-tel-mail svg { flex:0 0 auto; }
.kmk-person .kmk-tel { display:flex; }
