body    {   background-color: rgb(1, 59, 1); color: burlywood;}

a       {   color: chartreuse;}
h2      {   margin-bottom: 1px;}
h4      {   margin-bottom: 2px;}

nav li  {   margin: 10px; padding: 4px 6px 4px 6px;  /*       oben rechts unten links */
            display: inline-block; border: solid green 2px; border-radius: 2px;}

#rahmen {   margin: auto; display: flex; flex-wrap: wrap; /* ← bricht automatisch um bei schmalem Fenster */
            align-items: flex-start; }

.kopf   {   background-image: url('/bilder/wanderschuhe.webp');
            background-size: cover;       /* Bild füllt den ganzen Bereich */
            background-position: center;  /* zentriert */
            background-repeat: no-repeat;
            height: 350px;                /* Höhe anpassen */     }
nav     {   padding-top: 10px; padding-bottom: 10px;}

.inhalt {   margin: 10px; padding: 16px;
            display: block;         /* ← inline-block nicht mehr nötig */
            vertical-align: top;
            border: solid green 2px; border-radius: 4px;
            flex: 1;                /* ← teilen sich den Platz gleichmäßig auf */
            min-width: 280px;       /* ← unterschreitet der Platz 280px → umbricht */}

.inhaltohnerahmen
                { margin: 26px; }
.inhalt_bild    { max-width: 100%; height: auto; }

span.top        {display: block; width: fit-content; padding: 4px; margin-top: 24px; margin-left: auto; margin-right: auto;
                        border: solid #000000 2px; border-radius: 4px;}

/*----Tabelle-------*/
form table                      { width: 100%; max-width: 100%; border-collapse: separate; border-spacing: 0 8px;  /* Zeilenabstand */}
form table td:first-child       { width: 160px; font-weight: bold; color: burlywood; vertical-align: middle; padding-right: 16px; white-space: normal;}
form table td                   { padding: 4px 0; vertical-align: middle; }
/* ── Eingabefelder ── */
form input[type=text], form input[type=datetime-local], form input[type=url], form select, form textarea {
                                        background-color: #1a4a1a;      /* dunkles grün statt weiß */
                                        color: burlywood;
                                        border: 1px solid chartreuse; border-radius: 4px;
                                        padding: 6px 10px;
                                        font-size: 14px; font-family: inherit;
                                        width: 100%;
                                        box-sizing: border-box;
                                        transition: border-color 0.2s, background-color 0.2s;}
form input[type=text]:focus, form input[type=datetime-local]:focus, form select:focus, form textarea:focus {
                                        outline: none; border-color: #90ee90; background-color: #1f5a1f;     /* etwas heller beim Fokus */}   
form textarea                   { resize: vertical; min-height: 70px; max-width: 100%;} 
/* ── Abschicken Button ── */
form input[type=submit]         { background-color: chartreuse; color: rgb(1, 59, 1);
                                  border: none; border-radius: 6px; 
                                  padding: 10px 28px; font-size: 15px; font-weight: bold; cursor: pointer; margin-top: 12px; 
                                  transition: background-color 0.2s, transform 0.1s; }

form input[type=submit]:hover   { background-color: #90ee90; transform: translateY(-2px);    /* leichter Hebe-Effekt */}

form input[type=submit]:active  { transform: translateY(0); }

/* -- Damit die Funktion "Bitte Region auswählen farblich auffällt" -- */
select option[value=""] { color: #6a9a6a; font-style: italic; }
/* -- ENDE----Damit die Funktion "Bitte Region auswählen farblich auffällt" -- */

/* ── Überschrift mit Trennlinie ── */
form + h2, .inhalt h2 {
    border-bottom: 2px solid chartreuse;
    padding-bottom: 6px;
    margin-bottom: 16px;
}                                                                          
/*----Tabelle-Ende------*/

footer  {       background-color: rgb(2, 48, 21); 
                margin: 10px; padding: 10px; display: inline-block;
                border: solid black 2px; border-radius: 4px;
        }


@media (max-width: 1119px) /*---Handy----*/
{
        nav.mobil 			{ width: 92%; margin: 0 auto; }
        nav.mobil summary 		{ list-style-type: "☰"; font-size: 1.8rem; /* Groß genug zum Tippen, aber nicht riesig */
                                                cursor: pointer; color: #006d00; }
        nav.mobil summary:hover { text-shadow: 2px 2px 5px rgb(19, 2, 2); }
        nav [open] summary 		{ list-style-type: "✖"; }
        nav.pc 					{ display: none; }
        nav.mobil li            { margin-bottom: 10px; padding: 8px; list-style: none; 
                            border: 1px solid black; border-radius: 5px; 
                            background-color: rgba(255, 255, 255, 0.3); /* Leichte Transparenz für Lesbarkeit */ }
        
        form table td:first-child       {  width: auto; display: block; padding-bottom: 2px;  }
        form table td                   {  display: block; width: 100%;   }
        form table tr                   {  display: block; margin-bottom: 8px;  }

}

@media (min-width: 1120px) /*---PC---*/
{
        nav.wege li     { font-size: 1.6rem;}
        nav.pc          { display: block;}
	nav.mobil       { display: none;}

        form table      { width: 80%;}
}