@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,400&family=Source+Sans+3:wght@300;400;500;600&display=swap");
.pe-wrap {
--pe-accent: #7a9e7e;
--pe-accent2: #4a7a4e;
--pe-warm:  #f7f4ef;
--pe-card:  #ffffff;
--pe-text:  #2c2c2c;
--pe-muted: #888;
font-family: 'Source Sans 3', sans-serif;
max-width: 1100px;
margin: 0 auto;
padding: 0 16px 48px;
color: var(--pe-text);
} .pe-header {
text-align: center;
margin-bottom: 40px;
padding: 36px 20px 28px;
background: linear-gradient(160deg, #f0f5f1 0%, #e8f0e9 100%);
border-radius: 20px;
border: 1px solid rgba(122,158,126,0.2);
}
.pe-blatt { font-size: 2rem; margin-bottom: 12px; display: block; }
.pe-titel {
font-family: 'Cormorant Garamond', serif !important;
font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
font-weight: 600 !important;
color: #2d5a31 !important;
margin: 0 0 8px !important;
letter-spacing: 0.02em;
}
.pe-untertitel { font-size: 0.85rem; color: var(--pe-muted); margin: 0; font-style: italic; letter-spacing: 0.06em; }
.pe-linie { margin-top: 20px; height: 1px; background: linear-gradient(to right, transparent, rgba(122,158,126,0.5), transparent); } .pe-stats {
display: flex;
align-items: center;
justify-content: center;
gap: 36px;
background: linear-gradient(135deg, #2d5a31 0%, #4a7a4e 100%);
border-radius: 16px;
padding: 26px 36px;
max-width: 560px;
margin: 0 auto 36px;
box-shadow: 0 8px 28px rgba(74,122,78,0.25);
}
.pe-avg-block { text-align: center; flex-shrink: 0; }
.pe-avg-num { display: block; font-family: 'Cormorant Garamond', serif; font-size: 3.8rem; font-weight: 600; color: #fff; line-height: 1; }
.pe-avg-sterne { margin: 4px 0; }
.pe-s.on  { color: #f0d060; font-size: 1.15rem; }
.pe-s.off { color: rgba(255,255,255,0.2); font-size: 1.15rem; }
.pe-avg-label { font-size: 0.7rem; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.1em; }
.pe-balken-block { flex: 1; min-width: 150px; }
.pe-brow { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 0.73rem; color: rgba(255,255,255,0.6); }
.pe-bbg  { flex: 1; height: 5px; background: rgba(255,255,255,0.12); border-radius: 10px; }
.pe-bfill { height: 100%; background: linear-gradient(to right, #a8d5a2, #f0d060); border-radius: 10px; transition: width 1s ease; } .pe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-bottom: 24px; } .pe-card {
background: #ffffff !important;
border-radius: 14px;
padding: 22px;
border-top: 3px solid var(--pe-accent);
box-shadow: 0 2px 14px rgba(0,0,0,0.06);
transition: transform 0.2s, box-shadow 0.2s;
}
.pe-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(74,122,78,0.12); }
.pe-card-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.pe-avatar {
width: 42px; height: 42px; border-radius: 50%;
background: linear-gradient(135deg, var(--pe-accent), var(--pe-accent2));
color: #fff !important;
font-family: 'Cormorant Garamond', serif;
font-size: 1.2rem; font-weight: 600;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(74,122,78,0.25);
}
.pe-meta { flex: 1; min-width: 0; }
.pe-meta strong { display: block; font-size: 0.9rem; font-weight: 600; color: #1a1a1a !important; }
.pe-ktitel { display: block; font-size: 0.8rem; color: var(--pe-accent2) !important; font-weight: 500; margin-top: 2px; font-style: italic; }
.pe-bbadge {
display: inline-block;
background: rgba(122,158,126,0.12);
color: var(--pe-accent2) !important;
font-size: 0.7rem; font-weight: 600;
padding: 2px 8px; border-radius: 20px; margin-top: 3px;
border: 1px solid rgba(122,158,126,0.25);
}
.pe-sterne { flex-shrink: 0; }
.pe-text   { font-size: 0.88rem !important; line-height: 1.75 !important; color: #2c2c2c !important; margin: 0 0 10px !important; } .pe-antwort {
background: linear-gradient(135deg, #f0f5f1, #e8f0e9);
border-left: 3px solid var(--pe-accent);
border-radius: 0 8px 8px 0;
padding: 10px 14px; margin: 8px 0 10px;
}
.pe-antwort-label { display: block; font-size: 0.72rem; font-weight: 600; color: var(--pe-accent2) !important; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.pe-antwort p { font-size: 0.84rem !important; color: #3a4a3a !important; margin: 0 !important; line-height: 1.65; font-style: italic; }
.pe-datum { font-size: 0.7rem !important; color: #ccc !important; } .pe-mehr-wrap { text-align: center; margin: 6px 0 32px; }
.pe-mehr-btn {
display: inline-block; padding: 11px 30px;
border: 1px solid var(--pe-accent); color: var(--pe-accent2);
background: transparent; border-radius: 30px;
font-family: 'Source Sans 3', sans-serif; font-size: 0.9rem; font-weight: 600;
cursor: pointer; transition: all 0.25s; letter-spacing: 0.03em;
}
.pe-mehr-btn:hover { background: var(--pe-accent); color: #fff; box-shadow: 0 4px 14px rgba(74,122,78,0.25); }
.pe-leer { text-align: center; padding: 40px; color: #aaa; }
.pe-leer span { font-size: 2.5rem; display: block; margin-bottom: 10px; } .pe-form-outer { max-width: 560px; margin: 0 auto; }
.pe-form-toggle {
display: block; width: 100%; padding: 14px;
background: linear-gradient(135deg, var(--pe-accent), var(--pe-accent2));
color: #fff; border: none; border-radius: 10px;
font-family: 'Source Sans 3', sans-serif; font-size: 0.95rem; font-weight: 600;
cursor: pointer; margin-bottom: 20px; transition: opacity 0.2s;
box-shadow: 0 4px 16px rgba(74,122,78,0.3); letter-spacing: 0.03em;
}
.pe-form-toggle:hover { opacity: 0.88; }
.pe-form-box { background: var(--pe-warm); border-radius: 16px; padding: 28px 24px; border: 1px solid rgba(122,158,126,0.2); }
.pe-form-top { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; }
.pe-form-top h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; color: #2d5a31; margin: 0; letter-spacing: 0.03em; }
.pe-form-top span { font-size: 1.1rem; }
.pe-field { margin-bottom: 15px; }
.pe-field label { display: block; font-size: 0.78rem; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; }
.pe-field input[type="text"],
.pe-field select,
.pe-field textarea {
width: 100%; padding: 10px 13px;
border: 1px solid #d8e8da; border-radius: 8px;
font-size: 0.9rem; font-family: 'Source Sans 3', sans-serif;
background: #fff;
color: #2c2c2c !important;
-webkit-text-fill-color: #2c2c2c !important;
transition: border-color 0.2s; box-sizing: border-box;
}
.pe-field input:-webkit-autofill,
.pe-field input:-webkit-autofill:hover,
.pe-field input:-webkit-autofill:focus {
-webkit-text-fill-color: #2c2c2c !important;
box-shadow: 0 0 0 1000px #fff inset !important;
}
.pe-field input::placeholder,
.pe-field textarea::placeholder { color: #aaa; }
.pe-field input:focus, .pe-field select:focus, .pe-field textarea:focus {
border-color: var(--pe-accent); outline: none; box-shadow: 0 0 0 3px rgba(122,158,126,0.12);
}
.pe-stern-auswahl { display: flex; gap: 6px; margin: 4px 0; }
.pe-stern-btn { font-size: 2rem; color: #ddd; cursor: pointer; transition: color 0.15s, transform 0.15s; user-select: none; }
.pe-stern-btn:hover, .pe-stern-btn.aktiv { color: #f0d060; transform: scale(1.15); }
.pe-stern-hint { font-size: 0.77rem; color: #aaa; }
.pe-zaehler { display: block; text-align: right; font-size: 0.72rem; color: #ccc; margin-top: 3px; }
.pe-dsgvo-label {
display: flex !important; align-items: flex-start; gap: 10px;
font-size: 0.78rem !important; font-weight: 400 !important;
text-transform: none !important; letter-spacing: 0 !important;
color: #666 !important; line-height: 1.5;
padding: 12px; background: #fff; border: 1px solid #d8e8da; border-radius: 8px; cursor: pointer;
}
.pe-dsgvo-label input { flex-shrink: 0; margin-top: 2px; accent-color: var(--pe-accent); }
.pe-dsgvo-label a { color: var(--pe-accent2); }
.pe-submit {
width: 100%; padding: 13px;
background: linear-gradient(135deg, var(--pe-accent), var(--pe-accent2));
color: #fff; border: none; border-radius: 8px;
font-family: 'Source Sans 3', sans-serif; font-size: 0.95rem; font-weight: 600;
cursor: pointer; margin-top: 8px; transition: opacity 0.2s;
box-shadow: 0 4px 14px rgba(74,122,78,0.25); letter-spacing: 0.03em;
}
.pe-submit:hover { opacity: 0.88; }
.pe-danke { background: #e8f0e9; color: #2d5a31; padding: 14px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; text-align: center; margin-bottom: 16px; border: 1px solid rgba(122,158,126,0.3); }
@media (max-width: 600px) {
.pe-stats { flex-direction: column; gap: 18px; padding: 20px 14px; }
.pe-grid  { grid-template-columns: 1fr; }
.pe-form-box { padding: 20px 14px; }
.pe-header { padding: 24px 14px 20px; }
}